Issue metadata
Sign in to add a comment
|
Compositing yields wildly flashing DIV rectangles when rotating, translating etc.
Reported by
monfera....@gmail.com,
May 20 2018
|
||||||||||||||||||||||
Issue descriptionChrome Version : 66.0.3359.181 OS Version: OS X 10.13.4 URLs (if applicable) : https://codepen.io/monfera/pen/RyvPqa Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari: FAIL Firefox: OK IE/Edge: no idea What steps will reproduce the problem? 1. Go to https://codepen.io/monfera/pen/RyvPqa with Chrome or Safari 2. 3. What is the expected result? A heap of rectangles rotating in 3D around the Y axis without flashing artifacts What happens instead of that? Flashing is overwhelming Please provide any additional information below. Attach a screenshot if possible. Also happens with partial opacity (which still looks perfect on FireFox). It's not only rotation that causes such flashing - a simple movement along eg. X triggers it too. GPU compositing is naturally present; no green rectangles. Recent MBP 15" with maxed out configuration. Tbh no idea if it uses the Intel "graphics" chip or the AMD one. UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
,
May 20 2018
The codepen uses 20 rectangles (see row 88), but there's regular, less glaring flashing with as few as 5 elements. I haven't seen any flashing with 4 elements.
,
May 20 2018
No artifact on Android Chrome or built-in browser (Galaxy 9) Note: the same transforms are achievable by grouping the divs in a container div and rotating only that (actually, the more natural approach, but of course my real use case isn't rotating around a Y axis, it's more general). Here's a nested version, this has the exact same flashing artifacts: https://codepen.io/monfera/pen/jxdbWp
,
May 20 2018
Looks like occlusion isn't the only precondition. In this example there are lots of occlusions, but there are few (3-4) self-intersections at any place in this grid. So maybe this z-fighting like issue is only present if bounding cubes (or similar) of 4+ divs intersect. https://codepen.io/monfera/full/Vxgjor/
,
May 20 2018
,
May 21 2018
Able to reproduce the issue on chrome reported version 66.0.3359.181 and on latest chrome# 68.0.3436.0 using Mac 10.12.6, as the issue is seen from M-60(60.0.3112.0), hence considering this issue as Non-Regression and marking it as Untriage. Note: Issue is not seen on Ubuntu 14.04 and Windows-10. Thanks!
,
May 21 2018
,
May 27 2018
Every few seconds, I see a similar blinking glitch on this example, which actually uses SVG therefore (due to https://bugs.chromium.org/p/chromium/issues/detail?id=666244) it repaints on each single rAF, and it doesn't even use 3D transforms; it's planar, and the rotation is down to recalculating x, y point coordinates in JavaScript. Therefore the blinking glitch may well have a totally unrelated root cause. This example is slow on Chrome, maybe because of the regression https://bugs.chromium.org/p/chromium/issues/detail?id=845711#c9. It's plenty fast on FireFox. It's slow on Safari too, due to an unrelated reason (Safari's direct SVG attribute object setting is superslow).
,
May 27 2018
^ ended up writing up a separate issue as only the effects have some superficial similarity (blinking) https://bugs.chromium.org/p/chromium/issues/detail?id=847080 see the fun MP4 there
,
Aug 17
Assigning to ccameron for triage here. This smells like a core animation bug, and there's maybe nothing we can do for this?
,
Sep 25
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by monfera....@gmail.com
, May 20 2018