overflow属性在Safari浏览器中表现与预期不符的问题咨询

• Sass/SCSS 本身没有任何跨浏览器自动适配的能力
  • 它只是CSS预处理器，功能是把带嵌套、变量、混入逻辑的SCSS语法编译成标准CSS，全程不会自动添加浏览器前缀、不会针对特定浏览器补样式hack，所有兼容相关的处理都来自构建流程里独立的后处理工具（比如PostCSS搭配Autoprefixer），和Sass本身无关。
  • 很多开发者误以为Sass自带兼容能力，本质是项目脚手架默认把Sass编译和Autoprefixer做了流程集成，看起来像是Sass在处理兼容。如果没正确配置兼容规则，哪怕全项目用SCSS写代码，输出的样式和原生手写CSS没有任何兼容层面的差异。

overflow本身的规范是跨浏览器统一的，但Safari（尤其是iOS端）有两类和渲染上下文绑定的特殊逻辑，经常被误判为overflow的兼容问题：

1. 只要元素的任意父级设置了transform、filter、perspective属性，Safari就会把该元素作为新的绝对定位包含块，此时overflow:hidden的裁剪基准点会和其他浏览器出现偏差，最终表现为裁剪范围错位
2. 旧版Safari中，没有设置明确高度的块级元素被加上overflow:hidden时，不会自动把容器高度撑到子元素内容的高度，反而会触发高度塌陷，导致裁剪范围远小于预期，看起来像是overflow规则没生效

• 容易被忽略的操作类问题：SCSS的嵌套语法很容易打乱选择器优先级。如果在嵌套层级里给元素写了overflow:hidden规则，后续刚好有同元素的更高优先级规则在其他嵌套块里覆盖了这个属性，Safari对优先级的计算比Chrome/Edge更严格，其他浏览器下因容错保留的样式效果，在Safari下会被严格覆盖，最终表现为样式异常。

• 从构建产物里摘出编译后的纯CSS代码，还原成平级结构后在Safari下测试：如果异常消失，说明问题出在SCSS嵌套、变量传值错误导致的选择器优先级偏差，和overflow本身无关
• 检查编译输出的CSS文件，确认flex布局、gap属性、sticky定位相关的规则有没有补充Webkit内核前缀：如果缺失对应前缀，旧版Safari会直接让这些规则失效，间接引发元素尺寸、定位偏移，视觉上和overflow裁剪异常高度相似
• 给所有带overflow:hidden的裁剪容器补充明确的高度值，避免触发Safari的高度塌陷逻辑

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