1737270 - Viewport units don't update on resize

Status: RESOLVED DUPLICATE of bug 1733475

(Core :: Layout, defect)

Description

[Piotr Chrobak]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

1. Set any CSS property (except font-size?) to viewport unit. Eg.: height: 50vw;
2. Resize window at least 2 times

Test case:
https://viewport-units-not-update-on-resize.glitch.me

Actual results:

The CSS property stops refreshing the value on the second and subsequent resize events.

Expected results:

The CSS property should update its value every time the window size changes.

---

• Consider changing test case page window size by +/- buttons. It can also be changed by resize handle (right bottom corner) but it triggers many resize events and obscures the situation that first resize event works as expected.
• Setting calc(50vw) does not change the situation
• However setting custom variable and using it helps (second radio on test case page)
• Forcing repaint by JS on resize event also helps (checkbox on test case page)
• Oddly enough, this does not apply to all properties. For example font-size prop is ok without "hacks"
• I came across this after this tweet: https://twitter.com/pjchrobak/status/1445059060575916033 so it's kinda problem on a big production sites.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This seems fine on nightly and beta. Was fixed in bug 1733475 and will be in ESR as well.

Comment 3

[Piotr Chrobak]

Indeed, it works on Nightly. I should start from testing there ;)
Thank you and sorry for bothering. Cheers!