[Webkit-unassigned] [Bug 261185] New: Bug in implementation of new CSS Viewport Units in mobile Safari

[bugzilla-daemon at webkit.org]

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

            Bug ID: 261185
           Summary: Bug in implementation of new CSS Viewport Units in
                    mobile Safari
           Product: WebKit
           Version: Safari 16
          Hardware: iPhone / iPad
                OS: iOS 16
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: brett567 at icloud.com

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/

-- 
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/20230906/3abc8391/attachment.htm>