Search code examples
cssmedia-queriescss-positionfixed

Position fixed changing with changing device widths


Some weird stuff is happening with a position:fixed element.

When the viewport is at width 760px, the fixed position element seems to inherit position:absolute. Instead of it taking top:5em, botttom:5em from the viewport. It extends to the whole page. If an element has position fixed it shouldn't matter what position a parent element has, right? Why is this happening?

I have several media queries that affect some of the parent divs, but should this affect a positon:fixed element.

You can see it here when you click on "Click for More Info".


Solution

  • When looking at your code in Chrome's developer tools, I noticed that when I disable the following CSS code, the fixed position sizing works as expected again.

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    

    This is inside the .csstransforms3d.csstransitions.js-ready #inner-wrap properties inside the @media screen and (max-width: 47.5em) query of style.css.