Safari 不尊重溢出：与变换一起隐藏？答案

【问题标题】：Safari doesn't respect overflow: hidden in conjunction with transform?Safari 不尊重溢出：与变换一起隐藏？
【发布时间】：2023-04-01 01:30:01
【问题描述】：

以下 HTML 在 Safari（至少 15 岁以上）上引起了各种疯狂。首先，overflow: hidden div 的子 div 中包含的文本不会被裁剪到 div 的边界。其次，滚动页面会显示正确裁剪的子图像的一部分！

Chrome 和 Firefox 的行为符合预期（运行截取的代码以查看）。

从包含的 div 中删除 transform 可以解决滚动问题，但不能解决文本剪辑问题。我正在为这些元素制作动画，并希望继续使用transform。关于 Safari 的想法或解决方法有什么想法吗？

更新：将 will-change: transform 添加到 #slide div 或包含文本的子 div 修复了剪切问题。为什么以及这是否指向更好的解决方案？

<body style="margin: 0">
  <div style="width: 1280px; height: 500px; overflow: auto">
    <div id="slide" style="transform: scale(1); width: 375px; height: 2134px; overflow: hidden">
      <div style="position: absolute; width: 900px; height: 100px; font-size: 80px">
        this text should be clipped
      </div>
      <img
        src="http://next.playful.software/_/api/resources/-Mrhhc4W1jBhv-cffL0v/data/sha256:5815fbb5eee544606c43ad5f7fba7612f4c7eae3e4456741a7ae23dd493f1de9"
        style="width: 1599px; height: 2134px"
      />
    </div>
  </div>
</body>

【问题讨论】：

所有样式都必须内联吗？
@Kameron 如果将他们移到课堂上有助于解决问题，那就不行了！

标签： html css safari overflow css-transforms

【解决方案1】：

如果你指定overflow-x: hidden 应该没问题。对于 Safari，指定应该隐藏哪个轴将在使用 transform

时起作用

<body style="margin: 0">
  <div style="width: 1280px; height: 500px; overflow: auto">
    <div id="slide" style="transform: scale(1); width: 375px; height: 2134px; position: relative; overflow-x: hidden">
      <div style="position: absolute; width: 900px; height: 100px; font-size: 80px">
        this text should be clipped
      </div>
      <img
        src="http://next.playful.software/_/api/resources/-Mrhhc4W1jBhv-cffL0v/data/sha256:5815fbb5eee544606c43ad5f7fba7612f4c7eae3e4456741a7ae23dd493f1de9"
        style="width: 1599px; height: 2134px"
      />
    </div>
  </div>
</body>

【讨论】：

transformZ 不是一个东西，所以添加它可以有效地删除transform。如前所述，我想将transform 用于动画。
@darrinm 查看调整后的内容。指定overflow-x: hidden; 修复它。
@darrinm 对你也有用吗？
我很感激你的努力，但它不起作用。垂直滚动行为错误（在 Chrome 和 Safari 上）。起初鼠标滚轮会做一些弹性运动，但不会滚动。第二次鼠标滚轮移动使其滚动。停止后，需要两次尝试再次滚动。
@darrinm 有趣，我没有看到您所指的 chrome 问题。他们似乎对我（我的和你的 sn-ps）表现相同。对我来说，它在 Safari 中运行完全相同，但溢出滚动条没有显示在 Safari 上。