2

Working on a website today I found myself in the position (haha...) that a logo that I wanted to fix to the viewport didn't stick anymore. In my research to resolve this problem I learned that position: fixed won't fix to viewport if the ancestor element has a transform on it (see positions-fixed-doesnt-work-when-using-webkit-transform).

I made sure not to have any transforms on my element (or it's ancestors), I even tried to remove all child elements (which happen to have transforms and animations on them) – but I still didn't manage to get things going.

I am sort of clueless right now, so I made a jsfiddle for others to look at. The element that needs fixing is the bright red .titles element: http://jsfiddle.net/ZWcD9/90/

ato
  • 854
  • 1
  • 6
  • 9

1 Answers1

3

remove transfrom from body 

body {
    width: 100%;
    /* -webkit-transform: translateZ(0); */
    /* transform: translateZ(0); */
}
Dmytro Lishtvan
  • 788
  • 7
  • 12