[Webkit-unassigned] [Bug 188656] New: [Safari TP63] Web Animations render incorrectly

[bugzilla-daemon at webkit.org]

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

            Bug ID: 188656
           Summary: [Safari TP63] Web Animations render incorrectly
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ashley at scirra.com
                CC: dino at apple.com

The new Web Animations API support in the latest Safari Technology Previews renders incorrectly with our PWA. We've added a special "slow animations" mode to better demonstrate what is happening. There appear to be several different bugs with it.

Note any comparisons to Firefox are using Nightly 63+, since Firefox v62 and prior have a Web Animations bug that also affects our PWA.

Test URL: https://editor.construct.net/r113/?slow-animations

Case A:
1) Open the URL
2) Click 'New project'

Observed result:
A dialog animates in, but during the animation the background dimming layer is rendered on top. When the animation finishes it then switches to rendering the background dimming layer underneath, resulting in a sudden brightening of the dialog.
You can also see other layering problems like some icons underneath the dialog also rendering on top until the animation finishes.

Expected result:
Background dimming layer to render underneath dialog during animation. Appears correctly in Chrome and Firefox 63+.

Case B:
1) Open the URL
2) Click 'New project'
3) Click 'Cancel' on the dialog

Observed result:
Sometimes once the dialog animates out, it briefly appears aligned in the top-left of the window at full opacity. This seems sporadic and doesn't always happen, but does occasionally, particularly after reloading the page.
This is easier to reproduce if you remove ?slow-animations from the URL and repeatedly click "New project" and then press "Escape" to cancel the dialog. For me about one in every five times reproduces the issue.

Expected result:
The dialog element is removed from the document as soon as it finishes the animation. It should never render in between. It works correctly in Chrome and Firefox 63+. (This Safari issue is similar to this Firefox bug affecting Firefox 62 and older: https://bugzilla.mozilla.org/show_bug.cgi?id=1354501)

Case C:
1) Open the URL
2) Click 'New project'
3) Click 'Create'
4) Double-click in the empty space in the main view
5) A dialog fades in. Move it to the left side of the screen, then press 'Cancel'.

Observed result:
The main view is rendered using a canvas element. When the dialog animation is running, the parts of the dialog element that overlap the canvas are invisible, as demonstrated by this screenshot: https://www.dropbox.com/s/sechnwsixnoti48/Screen%20Shot%202018-08-16%20at%2016.36.45.png?dl=0

If the dialog element overlaps the canvas element entirely, it is completely invisible for the duration of the animation.

Expected result:
Dialog to always appear no matter what it is overlapping. Renders correctly in Chrome and Firefox 63+.

-- 
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/20180816/4c64c199/attachment.html>