[bug][safari] Carts are not displayed properly

[FaberVitale]

Carts are not displayed correctly on safari.

Safari left side.
Chrome right side.

[christopher-kleine]

Carts are not displayed correctly on safari.

When in doubt, blame Safari first.

Since I had a chance to bash Safari, let's focus on the issue:
Did you check the properties of the canvas? Like width, height etc?
I can't, since I'm no Mac user.

[FaberVitale]

@christopher-kleine

aspect-ratio: 1 / 1 defined in .game-enabled does not work.
We should probably fallback to something more compatible.

[aduros]

There are a couple issues with mobile Safari:

1. No CSS aspect-ratio support, although it looks like it's being added in iOS 15: https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes

2. No Fullscreen API support on iPhone (only iPad). We wait for the first tap on the game to fullscreen it for a better experience on mobile. I guess a workaround could be either expanding the iframe on wasm4.org to 100% on a tap, or popping it open in a new window.

[joshgoebel]

We should probably fallback to something more compatible.

Agree. Is the website FOSS as well? Would a PR be welcome? I'm seeing this on desktop Safari as well (haven't tried mobile)... I thought something was badly broken.

[aduros]

The website is in this repo under /site, PRs to fix the sizing without using aspect-ratio would be very welcome!

The relevant CSS is in /site/src/css/custom.css.

[FaberVitale]

This workaround seems promising

• https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b

• https://stackoverflow.com/a/53245657