Incorrect clipping of elements on Shopify page

• Component: Compositing
• Status: NEW ---

Created attachment 470481 [details]
Issue

Hello,

I am experiencing another very odd issue with Safari on animations. The issue is not reproducible on Firefox nor Chrome. I have been unable to re-create a minimal example so it might be a combination of factors.

The issue is reproducible on Safari 16.5, 17.4 and TP.

To reproduce the issue, you need to use this page: https://stretch-theme-dev.myshopify.com
Enter into the store using the password rewblo

To reproduce the issue, click on the "Catalog" link in the header to open a dropdown menu. The code uses an animation to reveal the menu, and commit the final styles (opacity: 1). However, on Safari only, the menu completely disappears once the animation has ended, despite the style being properly applied on the element (see attached screenshot).

The only way I have found to solve the issue is by adding a `will-change: transform` on the element, but this seems like an odd fix.

Thanks.

I've been able to find the code causing the issue. It is actually the overflow-x: clip being applied on the "shopify-section" class. I am not sure though why this style prevent the animation to work correctly.

[Simon Fraser (smfr)]

I have a hunch about what this might be (related to bug 266926).

[Radar WebKit Bug Importer]

<rdar://problem/125239811>

Hello,

In order to continue our development we had to remove the code that caused the issue on Safari so you won't be able to reproduce it on the URL I gave.

To reproduce the issue again, please add the following code:

.shopify-section {
  overflow-x: clip;
}

This will allow to trigger again the issue explained in this ticket.

[Simon Fraser (smfr)]

Created attachment 470616 [details]
Reduction

This is about `overflow-x: clip` also clipping in the Y axis in a compositing layer.

[Simon Fraser (smfr)]

Created attachment 470617 [details]
Reduction

[Simon Fraser (smfr)]

In `RenderLayer::calculateLayerBounds()` we hit the `UseLocalClipRectIfPossible` code path.

RenderLayer::clipRectRelativeToAncestor() calls `calculateRects()` which does the right thing for foregroundRect, but doesn't extend in Y for the backgroundRect.

[Simon Fraser (smfr)]

I need to study foreground and background clip rects, first introduced in https://commits.webkit.org/4548@main