| Summary: | Incorrect rendering for elements with animated transforms inside container with overflow: clip | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Benjamin <benjamin.larsson+wkbz> | ||||||||||
| Component: | Layout and Rendering | Assignee: | Simon Fraser (smfr) <simon.fraser> | ||||||||||
| Status: | NEW --- | ||||||||||||
| Severity: | Normal | CC: | bfulgham, jaybuz1993, simon.fraser, webkit-bug-importer, zalan | ||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||
| Version: | WebKit Nightly Build | ||||||||||||
| Hardware: | All | ||||||||||||
| OS: | All | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 466614 [details]
Image showing some lines being incorrectly clipped
Created attachment 466622 [details]
Test reduction
Thank you for filing this bug report and for the great test case! Interestingly adding border to the container makes the animating green line appear. This seems be some layerish bug. (it also works when the content is transitioned instead e.g. transition: margin-top 1s) Created attachment 468706 [details]
Transform rendering issue
I noticed something similar with overflow-x clip and transforms. See attachment.
|
Created attachment 466613 [details] Test case A container with overflow: clip cause problems with rendering animated elements inside it. Changing the container to overflow: hidden solves these issues. It appears that removing the animations but adding will-change: transform to the elements will also reproduce the same issue. In the test case, the incorrectly rendered elements are thin divs used as horizontal lines, with animated position/rotation/scale. When these lines have a border radius, then during animations they are clipped, with only the top half being rendered. This gives the appearance of some of the lines being thinner than they should. See attached image. When the border radius is removed, the full elements are rendered, but now their positions are slightly offset vertically. Reproduced in Safari 16.5 and nightly WebKit build 264935 on MacOS Monterey, and in Safari on iPhone. Please see the attached test case for a demonstration. It's a largely unedited upload of the test case I used while debugging this issue in our app, so apologies if it isn't quite as clean as it could be.