Bug 261185

Summary: [iOS] `svh`/`dvh` units are unexpectedly equal when Safari tab bar is not visible
Product: WebKit Reporter: Brett Donald <brett567>
Component: CSSAssignee: Abrar Rahman Protyasha <a_protyasha>
Status: RESOLVED FIXED    
Severity: Normal CC: a_protyasha, commit-queue, johann1301s, johannes.odland, simon.fraser, thorton, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
URL: https://donald.au/bugs/svh/test.html
See Also: https://bugs.webkit.org/show_bug.cgi?id=255708
Bug Depends on: 264613    
Bug Blocks:    
Attachments:
Description Flags
Mockup illustration of expected behaviour of the test page
none
Screenshot video of actual behaviour of the test page none

Brett Donald
Reported 2023-09-05 17:47:05 PDT
SUMMARY Mobile Safari is not distinguishing between the CSS units svh and dvh. These units should yield different dimensions in certain circumstances, however, instead they are yielding the same dimensions in all circumstances. Safari support for these units was announced in the WebKit blog around a year ago. These units are described in the specification CSS Values and Units Module Level 4. TEST PAGE TO ILLUSTRATE THE BUG https://donald.au/bugs/svh/test.html This test page contains four elements, each of which is sized using a different unit. The first element is sized as 100vh, the second as 100svh, the third as 100dvh and the fourth as 100lvh. EXPECTED BEHAVIOUR As the toolbars are collapsed and expanded, the only element which should change size is the one sized with dvh units (the lime coloured element). The other three elements should maintain a fixed size. When viewing the page in the small viewport (toolbars expanded), the elements sized with svh and dvh should both exactly fit the viewport, and the element sized with lvh should be larger than the viewport. When viewing the page in the large viewport (toolbars collapsed), the elements sized with dvh and lvh should both exactly fit the viewport, and the element sized with svh should be smaller than the viewport. To put it another way, the yellow element should be short, the pink element should be long, and the lime element should switch between short and long. ACTUAL BEHAVIOUR As the toolbars are collapsed and expanded (using the Hide Toolbar menu option), both the elements sized with svh and dvh change their size. Interestingly, the yellow element changes size immediately and the lime element adjusts a split second later. However, point here is that the yellow element should not be changing its size at all. ILLUSTRATIONS A mockup illustration of the expected behaviour, and a screenshot video of the actual behaviour are available at the link below. Captured on an iPhone running iOS 16.4.1. https://donald.au/bugs/svh/
Attachments
Mockup illustration of expected behaviour of the test page (28.07 KB, image/png)
2023-09-05 17:54 PDT, Brett Donald
no flags
Screenshot video of actual behaviour of the test page (363.65 KB, video/mp4)
2023-09-05 17:58 PDT, Brett Donald
no flags
Brett Donald
Comment 1 2023-09-05 17:54:05 PDT
Created attachment 467561 [details] Mockup illustration of expected behaviour of the test page
Brett Donald
Comment 2 2023-09-05 17:58:30 PDT
Created attachment 467562 [details] Screenshot video of actual behaviour of the test page
Johannes Odland
Comment 3 2023-09-05 23:00:25 PDT
See also David Bokans test page here: https://bokand.github.io/demo/urlbarsize.html This might be the expected behavior. When the toolbar is automatically hidden due to scrolling, only the dvh sized bar changes. The svh sized bar stays unaffected. This is as expected. When you press the “Hide toolbar” option however, you effectively turn off the automatic show/hide functionality. As there no longer is a toolbar that will automatically cover parts of the viewport the small viewport can be interpreted to be the same as the large viewport, similar to desktop browsers. I’m not sure what the correct interpretation should be here. It would be interesting to hear from the implementers. Do you have a specific use case where it’s important that the small viewport stays unaffected when the user disables the toolbar altogether?
Brett Donald
Comment 4 2023-09-05 23:40:30 PDT
Selecting "hide toolbar" is not a permanent change though. As soon as you click on the mini toolbar, the large toolbar reappears. I don't have a specific use case, but I'm imagining a scenario where I have a background image covering the small viewport with some overlay text in the centre of it. I don't want that text to reposition itself to the centre of the large viewport when the user hides the toolbar, I want to it to stay put. There would be no way to achieve that unless svh behaves the way I expect it to, as described in this bug report.
Radar WebKit Bug Importer
Comment 5 2023-09-06 17:45:02 PDT
Johannes Skuterud
Comment 6 2023-10-28 07:50:03 PDT
If it is intentional, I must say it’s all very confusing. I know for a fact that if you swiped on the tab bar in previous versions, it would minimize but reappear when the user scrolled. So why is it different now? I wish there was a way to always show the tab bar using a meta tag, and avoid all the headaches with the dynamic viewport altogether. If it is intended that 100svh should change value when hiding the tab bar(not by scrolling), I would at least expect the web content positioned sticky or fixed to “stick” to the tab bar during the animation that hides and shows it. I find it ugly that, for instance, the ::backdrop element does not animate with the tab bar when it animates. I ask, what would the user expect when hiding it? 1. For the background image to resize? No. 2. For the underlaying, hidden content to suddenly show? No. 3. For the fixed modal to change height after the tab bar animates. No. Ughh…
Abrar Rahman Protyasha
Comment 7 2023-11-09 16:12:09 PST
Abrar Rahman Protyasha
Comment 8 2023-11-09 16:17:01 PST
Brett, thanks for the bug report. I agree that this is unexpected behavior. Our small viewport units are not spec compliant currently because we allow clients to override layout parameters without enforcing collection of the minimum unobscured layout size _assuming_ all dynamic UI elements (like the Safari tab bar) are visible. This needs to be changed with a combination of WebKit changes and client-side adoption, with the former being captured by the PR I just posted.
EWS
Comment 9 2023-11-10 01:41:17 PST
Committed 270516@main (cc2d17a95691): <https://commits.webkit.org/270516@main> Reviewed commits have been landed. Closing PR #20271 and removing active labels.
WebKit Commit Bot
Comment 10 2023-11-10 12:26:46 PST
Re-opened since this is blocked by bug 264613
Abrar Rahman Protyasha
Comment 11 2023-11-10 14:59:30 PST
EWS
Comment 12 2023-11-13 11:31:39 PST
Committed 270652@main (43148740f3be): <https://commits.webkit.org/270652@main> Reviewed commits have been landed. Closing PR #20337 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.