Position fixed not working on Windows Safari

Question

I had a problem with gallery that is position:fixed; and the site content is scrolling over it. That position fixed worked in every single browser except in Safari on Windows 7 (yes it worked even in IE8, and Safari on Mac).

Top is defined, but yet it still act as a position relative and scroll down with the rest of the content.

Cybernetics

Answer 1

The solution was to define the z-index on that position:fixed; element. For some reason only on Windows Safari position:fixed; didn't work until any z-index was defined.

Later, I discover that this bug is probably caused by -webkit-transform property that some of the fixed elements on page have.

Also, I found that setting this on that fixed element could help:

-webkit-transform: translateZ(0);

Cybernetics

Answer 2

I don't know if this will help anyone - but I had this problem with making a drop down menu in twitter bootstrap V3.2.0 align to the left of the page (actually making a horizontal sub-menu that filled the width of the page). It only seemed to fail in safari (desktop and iphone). After hours of hunting I found bootstrap V3.1.0 worked and traced the difference to this

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

Specifically the three translate3d lines at the bottom were preventing the position:fixed from working for me.. once I removed those everything was golden.

Cailean