Bug 270697

Summary:

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

Product:

WebKit

Reporter:

mic.gallego

Component:

Layout and Rendering

Assignee:

Antti Koivisto <koivisto>

Status:

RESOLVED FIXED

Severity:

Major

CC:

bfulgham, koivisto, rniwa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

iPhone / iPad

OS:

iOS 17

Attachments:

Description	Flags
Shadow DOM issue	none
repro	none
better repro	none

mic.gallego

Reported 2024-03-08 06:46:53 PST

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.

Attachments
Shadow DOM issue (1.07 MB, image/png) 2024-03-08 06:46 PST, mic.gallego	no flags	Details
repro (404 bytes, text/html) 2024-03-13 02:29 PDT, Antti Koivisto	no flags	Details
better repro (394 bytes, text/html) 2024-03-13 03:51 PDT, Antti Koivisto	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2024-03-08 11:56:05 PST

<rdar://problem/124289418>

alan

Comment 2 2024-03-08 12:27:33 PST

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

alan

Comment 3 2024-03-08 12:30:21 PST

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

Comment 4 2024-03-12 05:23:30 PDT

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

Comment 5 2024-03-13 02:29:51 PDT

Created attachment 470336 [details] repro

Antti Koivisto

Comment 6 2024-03-13 02:32:37 PDT

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

Antti Koivisto

Comment 7 2024-03-13 03:51:57 PDT

Created attachment 470337 [details] better repro with WebAnimation matching the actual page, and also reproing in trunk

Antti Koivisto

Comment 8 2024-03-13 05:13:56 PDT

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

EWS

Comment 9 2024-03-13 10:41:33 PDT

Committed 276035@main (d83537abc7e7): <https://commits.webkit.org/276035@main> Reviewed commits have been landed. Closing PR #25814 and removing active labels.

Note You need to log in before you can comment on or make changes to this bug.