I created an application that utilizes the aspect ratio CSS property to manage the width of an element by only specifying its height. Unfortunately, when testing it on my Iphone 11 running iOS 14.7.1, the aspect ratio doesn't seem to function properly.
Here is a minimal working example (MWE):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 100vh;
width: 100vw;
background: darkgray;
}
div {
height: 20vh;
aspect-ratio: 1;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The output differs between my development machine (left) and the Iphone 11 (right):
https://i.sstatic.net/Tjvhwm.png https://i.sstatic.net/igX89m.png
The width of the div on the Iphone becomes distorted due to the aspect ratio not functioning correctly. This issue occurs in both chrome and safari. Is there any workaround available?