1641166 - vh units size should be affected by the `width` value of the meta viewport tag

Status: NEW

(Core :: Layout, defect, P3)

Description

[Hiroyuki Ikezoe (:hiro)]

Attachment: initial-scale=1 but minimum-scale is smaller than 1.0

Attaching file is an example to see the difference between 100vh and 100% computed values.

On my pixel 3, on Chrome the difference is 143px (note that the initial-scale value is 1.0 and the minimum-scale is 0.39 (the minimum-scale here is not the one in specified in the meta viewport though). If the minimum-scale is 1.0, the difference is 56px on my pixel 3.

So, it looks like the vh height should be "the ICB height + 56 / 0.39" (56 / 0.39 = 143).

But things are not so simple as far as I've tested. In cases where the minimum scale is dynamically changed, it's inconsistent. I am going to two cases where the minimum scale is dynamically changed in different ways.

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Attachment: viewport width is changed from "width=device-width" to "width=1000", thus the minimum-scale is changed from 1.0 to 0.39

In this case, vh units value is also changed in response to the minimum scale change.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Attachment: the minimum scale is changed from 1.0 to 0.5 because a wide element is added after load

In this case, vh units value is not changed in response to the minimum scale value.

Comment 3

[Botond Ballo [:botond]]

Does the 56px correspond to the dynamic toolbar's height?

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Yes, I think the 56px (in CSS untis at resolution:1.0) is the dynamic toolbar height on pixel 3.

Comment 5

[Markus Stange [:mstange]]

Can you clarify in this bug, especially in comment 0, what the expected behavior is in each of these test cases, and why? It's hard to understand how to evaluate whether a patch fixes this bug.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

For example in the third case (https://bugzilla.mozilla.org/attachment.cgi?id=9152012), you can see two "100vh - 100% = XXpx". The second one's value needs to be greater than the first one.

In the second case, it's same the second one's value needs to be greater than the first one. NOTE that if the device screen width is larger than 1000px, you will have to modify 1000 value in document.querySelector("meta[name=viewport]").content = "width = 1000 to be larger then the screen width.

In the first case, there's only one "100vh - 100% = XXpx". The value needs to be larger than the first value in the second/third case.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Markus realized me that making viewport units depend on the minimum-scale will introduce a cyclic dependency such as html { width: 200lvh }. That means, our current behavior is ideal.

The reason why the test case in comment 2 doesn't change the viewport value is to avoid the cyclic?

Comment 8

[Hiroyuki Ikezoe (:hiro)]

Okay, it turned out that Chrome doesn't depend on the minimum-scale, it rather depends on width value in the meta viewport tag. That's the reason why test case in comment 2 doesn't change the viewport value since the test case does have width=device-width. In other cases width is not device-width.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

FWIW, it loos like Safari doesn't have the concept of minimum-scale size changed by the content size such as html { width: 200vw}.