Issue metadata
Sign in to add a comment
|
Clip-path with translate + translate3d causes white lines in large images/videos
Reported by
h...@smartly.io,
May 16 2018
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Steps to reproduce the problem: 1. Open the attached clipPathTranslate3d.html page 2. Image should now have horizontal white lines going through them 3. Remove the translate3d from the transform style 4. Lines should now disappear What is the expected behavior? Image should display correctly without the lines. What went wrong? The image has 3 white horizontal lines going through it. Same thing happens with videos. See attached screenshot. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 66.0.3359.181 Channel: n/a OS Version: OS X 10.12.6 Flash Version: This only seems to happen if the image/video is large enough, setting the width and height to for example 500px works as expected. I'm not completely sure what causes this, it seems like if only translate or translate3d are present this doesn't happen, and if you edit the values of the translate in the example with devtools it seems to fix itself.
,
May 16 2018
Disabling chrome://flags/#enable-gpu-rasterization seems to fix the example case for me, but results in other images with different clip-path transform combinations breaking instead, see screenshot (text rendering not related). Enabling chrome://flags/#composited-layer-borders and looking at the example the lines seem to match with the borders.
,
May 16 2018
,
May 16 2018
,
May 17 2018
Unable to reproduce this issue on reported version 66.0.3359.181 using Mac 10.12.6 and Mac 10.13.3. Not seeing any white lines on opening attached html file. Attaching screencast and chrome://gpu details. @Reporter: Please check the video and let us know if we miss anything. Any further information on reproducing the issue would help in further triaging of the issue. Thanks!
,
May 17 2018
Thanks for looking into this. I'm quite surprised that you can't reproduce the issue, as I have checked this with many coworkers and we have had many customers complain about this. I've even tested this on a coworker's Ubuntu machine and by taking screenshots of headless chrome running in Dockerized Ubuntu, all of them have the issue. Safari and Firefox seem to render this correctly. Perhaps my test case wasn't extensive enough, I have attached a new test case that more accurately represents the situation in which we experience this issue (animating clip-path and transform). Please give this a try. I've also attached a screencast of how the issue looks to me and some additional debug information.
,
May 17 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 18 2018
Able to reproduce the issue on mac 10.13.3 using chrome reported version #66.0.3359.181 and latest canary #68.0.3433.0. Issue is specific to OS-Mac. Bisect Information: ===================== Good build: 64.0.3282.87 Bad Build : 64.0.3282.89 Change Log URL: (from omahaproxy) https://chromium.googlesource.com/chromium/src/+log/64.0.3282.87..64.0.3282.89?pretty=fuller&n=10000 From the above change log suspecting below change Change-Id: I7fdc6f60eb6462a94c3123e8e157226744384cd4 Reviewed-on: https://chromium-review.googlesource.com/848414 trchen@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner. Thanks...!!
,
May 18 2018
Not a P1 regression when it is several releases past. It's not clear that the blamed change is to cause of the problem, as opposed to making the example work at all. The white lines are almost certainly tile artifacts.
,
May 25 2018
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by h...@smartly.io
, May 16 2018337 bytes
337 bytes View Download