Page margins are lacking in Safari 15

[straight-shoota]

https://forum.crystal-lang.org/t/website-relaunch/6719/8

In Safari 15.6.1 this page https://crystal-lang.org/install/ lacks left and right margin.

https://forum.crystal-lang.org/t/website-relaunch/6719/15

The is only 1 property marked as unsupported in Safari 15.6.1: container-type: inline-size; (body element, set in layout.scss:13)

But the zero margin problem is due to it being set in reset.scss:11:

I think this should affect all pages, not just install. There's nothing special about the margins on the install page.

The zero margin on body is correct. The margins are supposed to be on the main which has a width restriction: min(100cqw - 3rem, var(--container-max, 120ch)). So it should have at least 1.5rem on either side. But I suppose container queries don't work in Safari 15.6, so the entire calculation is discarded. The container query is itself just a workaround for an incorrect calculation viewport size with scroll bar (#716). Ideally would find a different solution/workaround for this original issue. In the meantime, a fallback should work as well.

Safari 17 looks fine.

/cc @vlazar

[vlazar]

I think this should affect all pages, not just install. There's nothing special about the margins on the install page.

Correct.

But I suppose container queries don't work in Safari 15.6, so the entire calculation is discarded. The container query is itself just a workaround for an incorrect calculation viewport size with scroll bar (https://github.com/crystal-lang/crystal-website/pull/716).

Reverting this change adds correct margins https://github.com/crystal-lang/crystal-website/pull/716/files#diff-b83af0105fc49e17d074b0ffa191f997a0805f32284ece95c9b1553402695353L21-R21

-  --main-width: min(100vw - 3rem, var(--container-max, 120ch));
+  --main-width: min(100cqw - 3rem, var(--container-max, 120ch));

[straight-shoota]

@vlazar Could you try if #767 fixes this? https://deploy-preview-767--crystal-website.netlify.app/

[vlazar]

@straight-shoota Thank you, looks great now!