Using negative z-index in combination of either animation/transition/transform creates rendering issue when using overflow: auto
Reported by
christop...@gmail.com,
Sep 7 2016
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36 Example URL: Steps to reproduce the problem: 1. Use Chrome 53 Stable 2. Either go to JSFiddle at https://jsfiddle.net/caj3wvzf/ or use the attached repro. 3. Scroll the scrollable area What is the expected behavior? All the content should scroll visually. What went wrong? Only the transformed/animated/z-indexed content scrolls visually. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 53.0.2785.89 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 22.0 r0 This reproduces only in Chrome 53 and above, but not in Chrome 52 and below. I did some poking with developer tools and could see that the content is moved at least non-visually. It appears the rendering is just not repainting properly. The main issue seems to be using the negative z-index. Our website never add issue with such use until Chrome 53.
,
Sep 7 2016
==================================== Good Build: 53.0.2747.0 Base Position: 395489 Bad Build: 53.0.2761.0 Base Position: 398174 ===================================== Able to repro this issue on Windows 7, MAC (10.11.6) & Ubuntu Trusty (14.04) for the Google Chrome Stable Version - 53.0.2785.89 This is a regression issue broken in M48, below mentioned is the bisect info: CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/1ee44ea93271409b790999e882d05c0666a89850..a0f4b5051a2ef87f7de7cb469fe87d781cc0ab35 Suspecting Commit: c9b3e99e2a71f7bcc4d9652916347782ff616e0d Review URL: https://codereview.chromium.org/1980103002 @szager: Could you please look into the issue, and if it has nothing to do with your changes and if possible please do assign it to the concerned owner. Thank you.
,
Oct 6 2016
Our site is affected by this bug as well (example https://www.google.com/culturalinstitute/beta/exhibit/KQJyLdKUnP_LLw). Scrolling area containing components using negative z-index (gigapixel viewer) shows weird artifacts on scroll. Adding a transform3d on parents of elements with the negative z-index solve the issue. You can check the attached videos. We will probably ship the transform hack for now.
,
Nov 9 2016
Ping: szager@ possibly caused by your change?
,
Nov 10 2016
I can't reproduce this in stable (54.0.2840.90) or dev (56.0.2906.0). Marking this WontFix; please reopen with updated steps to repro if it recurs. |
|||
►
Sign in to add a comment |
|||
Comment 1 by christop...@gmail.com
, Sep 7 2016