Bug 270697 – REGRESSION (iOS 17.4, macOS 14.4, 270890@main): Animating element with display: none still remain visible

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

Created attachment 470246 [details]
Shadow DOM issue

Hi,

Starting from iOS17.4, a regression has been introduced that, in our case, causes a Shadow DOM element being visible... even with display: none!

It might be a complex combination as I have been unable to isolate a minimal use case, so you will need to try on this store: https://impact-theme-shape.myshopify.com/products/silhouette-bra-black

To reproduce the issue:

1. On iOS17.4, click on the Size dropdown to open it.
2. Close the dropdown popover.

Expected result (until iOS 17.3):

- On close, the div containing the shadow DOM is set to display: none, and no longer visible.

Incorrect result (from iOS 17.4):

- Despite being set with display: none, the full page overlay in the Shadow DOM remains visible on the page.

[Radar WebKit Bug Importer]

<rdar://problem/124289418>

[zalan]

regressed at https://commits.webkit.org/270890@main

[zalan]

This repros on macOS too as https://impact-theme-shape.myshopify.com/products/silhouette-bra-black has responsive design (just have to make Safari window narrow enough)

[Antti Koivisto]

The page performs a dance where it sets the root of the overlay containing tree (X-POPOVER)to display:none and immediately (before style recall) reinserts it into another position in the document, causing render tree teardown. When we recompute the style (applying display:none) we don't consider it a style change since there was no existing style due to the earlier teardown. In this case we fail to clear lastStyleChangeEventStyle which has been set by an animation on the element. 

Then another animation triggered style recalc comes along, takes the optimized AnimationOnly code path and picks up the lastStyleChangeEventStyle (which doesn't have display:none) bringing the element back alive.

[Antti Koivisto]

Created attachment 470336 [details]
repro

[Antti Koivisto]

Shadow DOM is incidental here, the issue is with animation in combination with a DOM mutation.

[Antti Koivisto]

Created attachment 470337 [details]
better repro

with WebAnimation matching the actual page, and also reproing in trunk

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/25814

[EWS]

Committed 276035@main (d83537abc7e7): <https://commits.webkit.org/276035@main>

Reviewed commits have been landed. Closing PR #25814 and removing active labels.