Question

i’m new with html5 and css3. I released my first website last month and now i found out that it’s not working well in the new chrome version (22): All the fixed elements are no longer fixed… The navigation bar on the top of the screen for example. it was fine only a week ago and i have no idea why now it’s not.
This is the website: http://www.biofilter.co.il

As far as i can tell, it’s still working fine in Firefox and IE.

Does anyone has an idea what’s going on and what could be the reason?

Answer 1

Your problem is likely caused by Chrome reworking how position:fixed elements handle stacking of z-index. The change was made for Chrome v22 so if you built on v21 and use position:fixed, you might have a problem.

They suggested testing by hitting the Chrome special URL about:flags in the browser, and setting Fixed position elements create stacking contexts. to true (for v22+) or false (for v21).

It is possible to rework your CSS by ensuring position:fixed elements are stacking correctly. Unfortunately, it is a little complicated so recommend you read these for better explanation:

• Stacking changes coming to position:fixed elements
• Elaborate description of Stacking Contexts