Viewport units not properly applied during / after resizing

Stencil
1

Hello there,

I noticed, that using viewport units (“vh” / “vw”) in style attributes or CSS classes may cause layout errors when resizing the browser window in desktop Safari. The dimension of objects are not re-calculated during or after the resize.

You can verify the issue by comparing the following URLs:

https://cdn.heiner-lamprecht.com/debug/stencil/
https://cdn.heiner-lamprecht.com/debug/static/

The first is a running Stenciljs app, based on the “App” template. The second is a complete static version of the previous one, without any Javascript code running.

Both pages display two divs with the width set to “45vw”. When resizing the window, the divs are supposed to keep their relative size. However, if you open the first URL in Safari, the width of the boxes do not change, but they do with the second URL. In Chrome or Firefox, both URLs act the same, just as with Safari on iOS / iPadOS.

Does anybody have an idea what’s going on here?

2

I’m not exactly sure, but I do see what you mean. Would you be able to open an issue for us in GitHub so we can take a closer look?

3

I’ve created a new issue and put the sample code to GitHub.

If you need any further information, just drop me a line. I will be happy to assist you.

4

Thank you, I appreciate it!