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:
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?