Fixed position div causes page to be truncated in less common mobile browsers
asimovwasright
I know there are many similar issues, but this is different to anything I have encountered before, so I thought I would describe the bug here, and offer a solution - and ask if anyone else has a better solution or can shed light on the cause of this weird issue.
The Bug:
In a page that has a div in position:fixed style, in some less common mobile browsers, e.g. Star Safari, DU Browser, Tint Browser - the page loads as expected, and the div is fixed as expected, however if the page height is greater than about 1500px, then the bottom of the page will be truncated - complete white curtain. You can still scroll to the bottom, but it's just white, zero content. This bug does NOT happen in more common browsers like chrome, firefox, opera, safari etc..
Here's a screen shot from my phone (HTC M8 - Tint Browser) - also reproduced this bug on Samsung S5.
There are many reasons that you might want a fixed div, in my case it was for a menu button that can follow the viewport, so the visitor doesn't have to scroll back to the top to get the menu.
I have posted a semi-solution bellow, but I will not mark it correct for a week, so hopefully someone else can offer a better solution.
Tim
asimovwasright
The reason I call this a "semi-solution" for two reasons:
1) This will not keep the div perfectly fixed, but it will elegantly move the div after a scroll event.
2) While this doesn't cause the page to truncate permanently, it does flash the 'curtain' during the opacity transitions. Weird, right?
EDIT: I should mention that this solution looks great in the common browsers (chrom, safari etc...), the flashing curtain will only apply to browsers that would otherwise be truncated with the fixed position div, so although it isn't pretty in some less common browsers, it's still better than the alternative, and is a minor compromise in style for more the common browsers.
This is the code for the menu button example, adapt for your own needs.
HTML Example
<body onscroll="menuButton()">
<div style="height:2000px; border: thick dotted green; width:90vw; background-color:#131313"></div>
<div id="menuButton">
<div class="image"></div>
</div>
</body>
CSS
#menuButton {
position: absolute;
top:25px;
left: 25px;
opacity: 1;
z-index: 1001;
transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
}
.image {
width:50px;
height:50px;
background-color:red;
}
JavaScript
function menuButton() {
setTimeout(function () {
var button = document.getElementById("menuButton").style;
var pos = document.documentElement.scrollTop || document.body.scrollTop;
var newPos = pos + 25 + 'px'; // Offset is the start value of the div top position.
button.opacity = 0;
setTimeout(function () {
button.top = newPos;
setTimeout(function () {
button.opacity = 1;
}, 500);
}, 500);
}, 800);
}
And here is a jsfiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: What is the best solution to design sql table relationship for a table that will be used by other tables
- Next: Chrome Application Doesn't Use System Proxy
Related
Related Related
- 1
jQuery Mobile Dialog Page - Fixed Position Header
- 2
Div with position:fixed not visible in mobile Responsive design
- 3
How to scroll div with page without position: fixed?
- 4
Fixed position on desktop browsers, relative/static position on mobile devices (Android, iOS ...)
- 5
Toggling div position:fixed sometimes causes scrolling bug
- 6
CSS: style="position: fixed" causes document to "ignore" <div> and overlays content
- 7
Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide
- 8
Header Div position fixed on top of page but on load show a div on top of it
- 9
How can I set a div to position:fixed, when scrolling it to the browsers top?
- 10
Floated div jumps to the right in FireFox when position:fixed is added by jQuery, works fine in other browsers
- 11
Set multiple div elements to "position: fixed" at the bottom of a page
- 12
Issue with fluid-fixed layout on mobile browsers
- 13
position: fixed overlapping page
- 14
Position fixed not working as expected in some browsers
- 15
Position fixed not working in mobile browser
- 16
setting div to position: fixed on scroll with jquery causes content below to jump up
- 17
setting div to position: fixed on scroll with jquery causes content below to jump up
- 18
fixed position for a div inside a div
- 19
Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?
- 20
Which (mobile) browsers allow styling of the page title?
- 21
Javascript / jQuery page change event on mobile browsers
- 22
Javascript / jQuery page change event on mobile browsers
- 23
Which (mobile) browsers allow styling of the page title?
- 24
HTML/CSS/JS Fixed position div is not fixed
- 25
jQuery position DIV fixed on scroll
- 26
div image position fixed + scroll
- 27
iPhone: Fixed position Div invisible
- 28
Responsive fixed position side div
- 29
DIV position: fixed; Center Horizontally
Comments