Bug 263836 – It is impossible to center a html-popup/-modal/-dialog during "Hide Toolbar animation"

• Status: NEW
• Component: Layout and Rendering

[Johannes Skuterud]

Created attachment 468390 [details]
iPhone screenrecording

Please see the attached video.

Here is my claim:
  - It is impossible to vertically center a "html-popup/-modal/-dialog" during "Hide Toolbar animation".

By "html-popup/-modal/-dialog", I mean the following:
  1. Any html implementation, that mimics the functionality of the native web api's confirm, prompt and alert dialogs.
  2. Typicly implemented with a div or the dialog element, using position fixed, with a z-index above the main content.
  3. With the possiblity for rich html content, like h1, button, a(anchor), svg's etc.

By "Hide Toolbar animation", I mean the animation that happens in to cases:
  1. When a user tap on the "Hide Toolbar" option in the Safari Menu.
  2. When the user tap on the minimized Safari Menu to show the Toolbar.

In the attached video, I have added a simple html button, that calls the native `alert` method with a long `lorem ipsum` text.

During the "Hide Toolbar animation" in the video, you can notice the following:
  1. The distance X from the top of the alert-dialog to the top of the viewport animates.
  2. The distance Y from the bottom of the alert-dialog to the bottom of the viewport animates.
  3. The distance X is equal to the distance Y in each animation frame.

My claim is that the three points above, is impossible to implement using non web api methods like `alert`, ie. "html-css-implemented".

Why is it "allowed" for native alert-dialogs to animate in this way, but not "allowed" for html-implemented dialogs? Or am I wrong, and it is possible?

I would be very glad to be "proven" wrong, satisfied if "proven" right, and very disapointed if neither.

Thank you for reading:)

[Johannes Skuterud]

Created attachment 468392 [details]
I added an example where the modal/dialog/popover does not animate on google.com.

[Alexey Proskuryakov]

Thank you for the report. Could you please attach your test case?

[Johannes Skuterud]

Created attachment 468414 [details]
HTML alert dialog example

[Johannes Skuterud]

I added an index.html file.

Open the link below on iOS Safari to reproduce the initial video example.

https://bug-263836-attachments.webkit.org/attachment.cgi?id=468414

[Radar WebKit Bug Importer]

<rdar://problem/117950601>