设置aspect-ratio的Div内使用height:100%在部分浏览器存在兼容问题

本问题涉及CSS新特性aspect-ratio，现有一套嵌套div布局：外层div设置固定宽高，中间div设置width:100%、aspect-ratio:9/16和max-height:100%，内层div设置height:100%、aspect-ratio:9/16和max-width:100%。该布局在桌面版Chrome和Firefox中显示正常，但在桌面版Safari、移动端Safari及移动端Chrome中显示异常。

显示效果对比 #

• 预期效果（桌面版Chrome）：
  

• 异常效果（移动端Chrome）：
  

代码示例 #

CSS 代码 #

div {
  box-sizing: border-box;
}
.con3 {
  border: 4px solid black;
  width: 200px;
  height: 200px;
}
.con2 {
  border: 4px solid violet;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100%;
}
.con1 {
  border: 4px solid skyblue;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
}

HTML 代码 #

<body>
  <div class="con3">
    <div class="con2">
      <div class="con1">
        hi
      </div>
    </div>
  </div>
</body>

咨询问题 #

• 该问题的成因是什么？
• 是否已有相关Bug记录？
• 有没有能保留父元素aspect-ratio属性的解决方案？

内容的提问来源于stack exchange，提问作者tybro0103