Ruffle logo on the front-page isn't displayed correctly on Safari

[Korne127]

The Ruffle logo (SWF) that is embedded on the front-page (https://ruffle.rs) isn't displayed correctly on Safari on macOS.
On Firefox, the website looks like this (which is probably how it's intended):

However, on Safari, the website looks like this:

The logo seems to be way too small, and as a result there is a huge amount of blank space. The animation itself works correctly though.

Additionally, when loading the website in Safari, it looks like this:

Ruffle-Logo.Safari.mov

As you see, there is a text (Backup all saves (download all sols)) with a horizontal line for a short amount of time before the logo is loaded and the animation is starting.

[danielhjacobs]

What version of Safari are you using? The dialog element for the save manager not working properly points to a version before 15.4: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

[Korne127]

That's probably the issue. I'm still on macOS 11 (Big Sur) and since the Safari versions are tied to the macOS versions, I'm using Safari 14.
However, if the front-page depends on an element that doesn't work in some rather new browser versions to be rendered correctly, I'd suggest to have a fallback to display it correctly for browsers that don't support it (if it couldn't work with the SWF file, maybe a static logo) or at least a note that the website isn't displayed correctly in the current browser.

[danielhjacobs]

The Ruffle logo being the wrong size is because the Ruffle home page uses aspect-ratio.

[Korne127]

Ah, I understand. Well, I am not really an HTML/CSS expert, but could be padding-top: 56.25%; /* 16:9 aspect ratio */ used instead of (or additionally to??) the aspect-ratio tag to achieve a greater compatibility?

[danielhjacobs]

I tried that out a bit, but it doesn't seem to keep the size responsive.