Bug 255708

Summary:

Viewport units are sized wrong in SFSafariViewController

Product:

WebKit

Reporter:

Johannes Odland <johannes.odland>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Major

CC:

a_protyasha, augus.dupin, brett567, jensimmons, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

iPhone / iPad

OS:

iOS 16

See Also:

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

Attachments:

Description	Flags
Screenshot of David Bokans viewport unit test page	none
Screenshot of David Bokan’s test page	none
Test on iOS 18 beta 3	none
Test on iOS beta 3, SFSafariViewController, no UI.	none
Test on iOS beta 3, Safari, no UI.	none

Description Johannes Odland 2023-04-19 23:28:50 PDT

Created attachment 466000 [details]
Screenshot of David Bokans viewport unit test page

Viewport units inside SFSafariViewController are wrong. 
vh units and lvh units are sized relative to the small viewport. 
dvh units ends up being larger than lvh and vh units.

This causes problems in webpages that use viewport units to size content.

Steps to reproduce: 

Open David Bokan's viewport unit test page: https://bokand.github.io/demo/urlbarsize.html

Expected result: 
The bars with height: 99vh and 99lvh should be sized relative to the large viewport (browser interface retracted).

Actual result: 
The bars with height: 99vh and 99lvh are sized relative to the small viewport (browser interface expanded).
99dvh is larger than 99lvh.

Comment 1 Radar WebKit Bug Importer 2023-04-21 12:44:26 PDT

<rdar://problem/108380836>

Comment 2 Johannes Odland 2023-06-07 22:27:21 PDT

Hi. I'm so exited for Safari 17. 

Do you know if there are any plans on improving support for viewport units in the SFSafariViewController?

Comment 3 Brett Donald 2023-09-05 18:10:46 PDT

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

Comment 4 Bruno Stasse 2024-07-15 04:15:41 PDT

This is quite problematic, as it makes both the `vh` and `lvh` unit unreliable on iOS. A fix would be much appreciated.

Comment 5 Brett Donald 2024-07-15 17:56:02 PDT

This bug is most likely a duplicate of 261185, which has been fixed and released in iOS 17.4 and iPadOS 17.4.

Comment 6 Abrar Rahman Protyasha 2024-07-15 18:16:48 PDT

@Bruno, I did make some improvements here with bug 261185. How much of this still reproduces for you?

Comment 7 Johannes Odland 2024-07-15 21:10:06 PDT

Created attachment 471891 [details]
Screenshot of David Bokan’s test page

From testing with the SFSafariViewController inside Slack, it seems like the viewport units are still wrong.

Comment 8 Abrar Rahman Protyasha 2024-07-16 11:12:21 PDT

Created attachment 471893 [details]
Test on iOS 18 beta 3

@Johannes, which iOS version are you testing with? Here's what I see (with SFSafariViewController) on iOS 18 beta 3.

Comment 9 Bruno Stasse 2024-07-16 11:30:03 PDT

I have tested in iOS 17.5.1. I am not able to test in later versions at the moment.

However, based on your screenshot @Abrar it looks like the bug is still present in iOS 18? We can see that when the browser UI is expanded `99svh` = `99vh` = `99lvh` = `739px`, which is incorrect.

`vh` and `lvh` should be relative to the large viewport, that is the viewport with the browser UI collapsed. `svh` should be relative to the small viewport, that is the viewport with the browser UI expanded (as visible on your screenshot).

As far as I can tell, on your screenshot `99svh` has the correct size, but `99vh` and `99lvh` should be bigger.

Comment 10 Abrar Rahman Protyasha 2024-07-16 11:38:46 PDT

Created attachment 471894 [details]
Test on iOS beta 3, SFSafariViewController, no UI.

Comment 11 Abrar Rahman Protyasha 2024-07-16 11:39:13 PDT

Created attachment 471895 [details]
Test on iOS beta 3, Safari, no UI.

Comment 12 Abrar Rahman Protyasha 2024-07-16 11:39:32 PDT

@Bruno, Thanks for the clarification. It looks like I was holding things wrong.

I've attached named screenshots with the UI retracted (in both SFSafariViewController and in Safari) -- note the difference.

We need to get SFSafariViewController up-to-par with Safari here.