Back CSS

Fix Mobile Safari fixed position and z-index issue

WRITTEN BY ON 07 May 2014

This quick code fixes position:fixed and z-index issue on mobile safari.

The scenario:

Assume you have a header on top of a page, it's set to be fixed position, and you have its z-index set to lowest. Then you have a content layer, so when you scroll down, the header will remain fixed and thus you have a good effect.

However, with mobile safari the header z-index seems to be ignored, otherwise quite buggy. Here is the fix, add this to the content layer and it will magically fix itself.

#content {
   -webkit-transform: translate3d(0,0,0);

I had this issue and I did a quick search on google. Here is the reference: fixed-positioning-z-index-issue-in-mobile-safari

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.