| Summary: | It is impossible to center a html-popup/-modal/-dialog during "Hide Toolbar animation" | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Johannes Skuterud <johann1301s> | ||||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | bfulgham, ntim, simon.fraser, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 17 | ||||||||||
| Hardware: | iPhone / iPad | ||||||||||
| OS: | iOS 17 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 468392 [details]
I added an example where the modal/dialog/popover does not animate on google.com.
Thank you for the report. Could you please attach your test case? Created attachment 468414 [details]
HTML alert dialog example
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 |
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:)