Safari中transform scaleX导致display:flex失效问题求助及原因解析

你遇到的问题本质是Safari对宽度为0的flex容器有特殊渲染逻辑：

• 当给flex容器设置width: 0时，Safari会判定该容器无可用布局空间，直接跳过display:flex的布局规则，导致内部子元素无法按flex方式排列，这就是你看到flex属性失效的核心原因。
• 而transform: scaleX(0)只是视觉层面的缩放变换，不会改变元素的布局盒模型——元素在文档流里的占位逻辑、布局计算依然基于原width值，所以哪怕视觉上缩到看不见，width:0的布局限制仍会生效，Safari还是不会处理flex布局。

改成width: 0.0001px后问题解决的原因很明确：这个值视觉上和0几乎无差别，但并非严格的0，Safari会判定容器有实际可用空间，因此正常应用display:flex布局规则，再配合scaleX(0)的视觉隐藏，既实现了交互效果，又保留了flex布局功能。

优化建议 #

其实无需同时设置width和transform来实现隐藏，只保留transform: scaleX(0)即可——transform不影响布局盒模型，Safari里的flex容器会正常工作，视觉上也能达到隐藏效果；如果需要兼容更老浏览器版本，再用极小宽度代替0即可。

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