Safari 18.5 不遵循CSS aspect-ratio属性的问题排查求助

大家好，我最近在做PDF页面渲染到Canvas的文档查看器功能时，遇到了Safari下的一个诡异问题——Chrome和Firefox都能正常工作，但Safari 18.5（运行在macOS 15.5上）的表现完全不符合预期，想请各位帮忙分析下问题出在哪。

实现逻辑与代码结构 #

我的思路是：加载PDF后，先把所有页面容器和Canvas添加到DOM（确保Canvas渲染上下文可用），再通过JS计算PDF页面的实际宽高比，给每个div.page-container设置inline的aspect-ratio样式，最后把PDF内容渲染到Canvas上。

HTML结构 #

<div class="scrolling-document-container">
  <div class="page-container" data-page-number="1" style="aspect-ratio: 0.772727">
    <canvas class="page-surface" width="1310" height="1694"></canvas>
  </div>
  <div class="page-container" data-page-number="2" style="aspect-ratio: 0.772727">
    <canvas class="page-surface" width="1310" height="1694"></canvas>
  </div>
  <!-- 更多页面容器 -->
</div>

注：div.page-container的style属性是在PDF加载完成、DOM元素全部挂载后，通过JS动态设置的。

CSS样式 #

div.scrolling-document-container {
  --document-viewer-width: calc(100svw - 16rem);
  width: var(--document-viewer-width);
  height: 800px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

div.scrolling-document-container > div.page-container {
  position: relative; /* 用来定位加载动画，渲染完成后移除 */
  width: var(--document-viewer-width);
  max-width: 100%;
  height: auto;
}

div.scrolling-document-container > div.page-container > canvas.page-surface {
  z-index: 0; /* 确保在加载动画下方 */
  width: 100%;
  height: 100%;
}

浏览器表现差异 #

• Chrome & Firefox：完全符合预期。scrolling-document-container的宽度为calc(100svw - 16rem)，每个page-container会根据设置的aspect-ratio自动计算高度，实现“适应宽度”的效果，滚动查看正常。
• Safari 18.5：所有page-container的高度被拉伸到和父容器的可见高度（800px）一致，页面内容被纵向拉伸，完全没有按照aspect-ratio计算高度，看起来像是强制“stretch”而非“fit to width”。

已完成的排查 #

1. 样式优先级检查：在Web Inspector里确认，page-container的inlineaspect-ratio确实被正确应用，没有其他样式覆盖，优先级为最高。
2. 兼容性确认：Safari 18.5完全支持aspect-ratio属性，不存在旧版本不支持的问题。
3. 诡异的测试现象：在Inspector里来回切换page-container的任意样式（比如临时关闭再打开position:relative），有时候不需要实际修改样式，只是触发了样式重计算，页面就突然正常显示了——高度按照aspect-ratio正确计算，内容也不再被拉伸。

我的疑问与猜测 #

我现在有两个方向的猜测，但不确定哪个正确：

• 会不会是WebKit的布局计算bug？因为我是在DOM元素挂载后才通过JS设置inlineaspect-ratio，WebKit可能在初始布局时已经计算了height:auto，之后设置inline样式后没有重新触发依赖于aspect-ratio的布局重计算？
• 或者我的写法本身违反了CSS规范？Chrome和Firefox做了兼容处理，自动修正了布局，但Safari严格执行了规范，导致表现异常？

有没有遇到过类似问题的朋友，或者对CSS布局规范熟悉的大佬，能帮我分析下问题出在哪，或者有没有什么可行的修复方案？

内容来源于stack exchange