Fixed position and webkit issue
I have a responsive website that has a menu as a sidebar (like an FB app) that is fixed with a help position: fixed;
in the right corner. So far this works fine, except for iOS7 in combination with -webkit-overflow-scrolling: touch;
. The fixed element does not stay in its position, and it moves to the fixed position after the scroll is complete.
Do any of you have any advice?
thank
source to share
I faced the same problem all day long, the conclusion is: yes, there is a bug when you put an item as "fixed" in a container with "-webkit-overflow-scrolling: touch", in Apple devices. And I couldn't find a job. '-webkit-transform: translate3d (0,0,0)' and '-webkit-backface-visibility: hidden' have a value.
So finally I got to work by reassembling my html structure so that the fixed element is not in the scrollable container, is at the top level. Maybe not ideal if "body" is your scrollable container, but hoping it shed some light on a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And the CSS would look like this:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Essentially, the bottom line does not fit as a fixed element that exists in a scrolling container. You have to accept it if you don't want to deal with this iOS problem.
source to share
I was able to solve this problem by dynamically changing the style -webkit-overflow-scrolling
on auto
whenever a button is pressed to show the div position: fixed
(which is inside the scroll of the container).
I am just adding the class dont-scroll
.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the div position: fixed
is hidden (in my case when the user clicks the "cancel" button on the popup modal), I dynamically remove the class dont-scroll
to enable smooth scrolling again.
source to share