Forcing aspect ratio with CSS doesn't work on Safari
As announced during WWDC20 at What's new for web developers, starting from Safari 13.1, WebKit now calculates the image aspect ratio from the width and height values of the image element. This means that the issue you have faced is fixed on the latest version of the browser.
On the next video you can see a test ran at my machine where Chrome and Safari behaves the same: https://recordit.co/GULXcMpfPW
See also:
- WebKit changelog including the fix
- WebKit changeset where the fix is implemented
CSS - aspect-ratio: not working in Safari browser
aspect-ratio as a css property is not supported in Safari prior to Safari 15, but the use of media queries with aspect-ratio @media: (aspect-ratio: 1/1) is supported: https://caniuse.com/?search=aspect-ratio
Safari not computing image aspect ratios from width and height attributes
The issue was related to a calculation error in Safari's WebKit API. The issue was reported on the WebKit Bugzilla (report), and was patched in WebKit Changeset 276521. Said changeset was merged and released with Safari Technical Preview 125.
Related Topics
Resize Unknown Number of Elements to Fill Width of Parent Container
Hide Overflow on Elements with Fixed Position
Can It Flexbox? Chat Window with Input at the Bottom, Chats Scrolling Up
How to Add List-Style-Type: "Disc" to <P> Tag
Input Padding Cutting Out Text in Firefox
Adding CSS Stylesheet to Pages Based on Route in Opencart
Css: Set Color for Selected Row in a Table
How to Get a SASS Nested Nested Media Query to Work with the Use of the Media Query or Operator
How to Change Height of Ui-Grid Row
Input Background Colour Destroys Styling
Is the Hash Necessary in Svg Font-Face Declarations
Css, Changing Hover Effect of Icon Font in a Link