overflow属性便捷语法的不兼容问题

overflow属性的便捷语法

CSS的overflow属性定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。是overflow-x和overflow-y的简写属性。

一般，我们会赋予它单个值，比如visible，hidden，scroll。这里介绍一下该属性的便捷语法，赋予两个值，分别控制overflow-x和overflow-y。
比如：overflow: hidden auto;相当于overflow-y:hidden; overflow-x: auto;

以上就是overflow属性的便捷语法。

便捷语法需要注意的问题

overflow的便捷语法是个比较新的属性。 可能习惯了CSS便捷写法的我们会认为，这种写法理所当然的早就应该支持。然而事实不是这样——
overflow便捷语法对应的overflow-x和overflow-y的顺序，还尚未达成一致。根据MDN的说法，为了匹配使用新逻辑属性overflow-block和overflow-inline时的顺序，Firefox 63就尝试将之前的顺序颠倒了一遍。然而到现在，FireFox 67依然没有做出这样的更新，Chrome 74也没有。展示如下：

FireFox 67

Chrome 74

至于移动端的浏览器，笔者并未过多测试，估计目前采取的做法是取第一个值。

总结

关于笔者为何调查这么蛋疼的问题，当然是因为工作中遇到了问题。Chrome中白纸黑字，明确告诉笔者的先X后Y的顺序，到了iOS的移动端，不论safari还是webview，都没有正确的展现——
overflow: hidden auto;本意是x轴隐藏，y轴滚动，到了iOS移动端，y轴就是不按照规则滚动；待笔者改为overflow: auto hidden;，y轴才正常滚动。于是有此文。