Bug 184486
| Summary: | Opacity transition stuck at zero until switching browser tabs | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Andrew Herron <thespyder> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | dino, graouts, graouts, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 11 | ||
| Hardware: | Mac | ||
| OS: | macOS 10.13 | ||
Andrew Herron
Apologies for the complexity of this test case; I tried to build a simple example, which lead me to a workaround, but I couldn't replicate the issue without using the full component. I'm hoping the WebKit team has better tools to debug style rendering problems and can still track it down through all the noise.
Test page:
http://static.ephox.com/rendering-bug/readme.html
Steps:
* Click the + icon on the toolbar
* Click "Link..."
* Nothing appears to happen (the element is there but not visible)
* Switch to another browser tab and then back to the test page
* The dialog is now visible
This worked in Safari 11.0, breaks in 11.1 - the report sent to me uses 13605.1.33.1.2. Still replicable in Safari 13605.2.1 and STP 53 (13606.1.11.2).
Under the hood, the problem appears to be that our logic for this dialog goes through some fairly complex steps to display with a fade in opacity:
* Adds the dialog element to the DOM
* Sets opacity to 0
* Reads offsetWidth to force a layout pass
* Sets opacity to 1
The length of the transition is impossibly small in that release, but the length doesn't seem to matter. A similar process is used for our menus, which don't have this issue, but they are permanently attached to the DOM whereas dialogs are created from scratch every time they are shown. So it's some combination of opacity and transition immediately as an element is attached.
I found two viable workarounds:
* Introduce a setTimeout before setting opacity to 1
* Remove display:flex from the outer dialog container (flex isn't actually required at that level)
The second workaround is the one I'm going with in production.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/39372781>
Antoine Quint
Using shipping Safari, the dialog appears as soon as you click on "Link…" now. I believe this is fixed, but please reopen if you feel that is not the case.
Andrew Herron
Confirmed, thank you!