Search code examples
htmlcssgoogle-chromewebkit

Chrome rendering issue with fixed element and overflow hidden

I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.

Notice the white block on the bottom right

You can see the problem here: http://brandca.co/cterranum/

We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.

We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.

We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.

Solution

  • The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.