[Webkit-unassigned] [Bug 184486] New: Opacity transition stuck at zero until switching browser tabs

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=184486

            Bug ID: 184486
           Summary: Opacity transition stuck at zero until switching
                    browser tabs
           Product: WebKit
           Version: Safari 11
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: andrew.herron at ephox.com
                CC: dino at apple.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180411/026e114a/attachment-0002.html>