Geek Answers Handbook

CSS position fixed weird rendering in chrome while scrolling

I have an element located at the top of the screen with a z-index of 100. When I view a 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 that looks like this :

position fixed chrome problem

UPDATE:
I noticed that a rendering problem occurs every time a fixed element skips a new <section>...</section> while scrolling. Chrome seems to have some issues with HTML5 tags, such as <section>...</section> or <nav>...</nav> . Changing these options to <div>...</div> solves the rendering problem, anyway, I would still like to continue using HTML5 tags.

Does anyone know a “hack” to solve this problem?

Until then, I will try to create a reproducible code sample and register a chromium error.

+4
source share
2 answers

The cause of the problem is when elements with opacity 0 are inside a fixed element. Setting display: none solved the problem.

+3
source

In particular, for the latest version of the Chrome browser (55.0.2883.87 m (64-bit)) I added:

 -webkit-transform: translateZ(0);
0
source

More articles:


All Articles