CODEWITHSUNDEEP
csshtmlgoogle-chromecss-position
borisdiakur
borisdiakur

Reputation: 12072

CSS position fixed strange rendering in chrome when scrolling

I have an element positioned fixed at the top of the screen, with a z-index of 100. When I scroll up the page in Chrome (V. 21.0.1180.82 on OS X and V. 21.0.1180.83 m on Windows) I notice a rendering problem which looks like this:

position fixed chrome problem

UPDATE:
I noticed that the rendering problem appears every time when the fixed element passes a new <section>...</section> during scrolling up. Chrome seems to have some issues related to HTML5 tags like <section>...</section> or <nav>...</nav>. Changing those to <div>...</div> solves the rendering problem, anyway I would still like to continue using HTML5 tags.

Does anybody know a "hack" to solve this problem?

Until then I will try to create a reproducible code sample and file a bug to chromium.

Upvotes: 5

Views: 5276

Answers (2)

Oleksii Kyslytsyn
Oleksii Kyslytsyn

Reputation: 2426

Particularly for Chrome latest browser version (55.0.2883.87 m (64-bit)) I have added:

-webkit-transform: translateZ(0);

Upvotes: 0

borisdiakur
borisdiakur

Reputation: 12072

The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.

Upvotes: 3

Related Questions