CSS Overflow-x：隐藏在 chrome 上的动画中，但不是 safari答案

【问题标题】：CSS Overflow-x: hidden in animation working on chrome but not safariCSS Overflow-x：隐藏在 chrome 上的动画中，但不是 safari
【发布时间】：2020-02-21 20:38:36
【问题描述】：

我有一个动画，它通过将容器从 0 增加到 660 像素，从左到右滑动几个下拉菜单。这不是我自己做的，但这是我开始工作时的样子：

    @keyframes fadeIn-animation {
        from {overflow-x: hidden; max-width: 0}
        to {overflow-x: hidden; max-width: 660px}
    }
    @-webkit-keyframes fadeIn-animation {
        from {overflow-x: hidden; max-width: 0}
        to {overflow-x: hidden; max-width: 660px}
    }
    .animated-container {
        animation-name: fadeIn-animation;
        animation-duration: 1s;
        -webkit-animation-name: fadeIn-animation;
        -webkit-animation-duration: 1s;

这在 chrome 上可以正常工作，但在 safari 上不行。

容器从 0 像素增长到 660 像素的动画部分可以工作，但由于溢出可见，所有子元素在过渡期间已经可见。 https://jsfiddle.net/6cqapbnu/

我尝试将 bar 元素设置为

overflow-x: hidden; 
overflow-y: visible;

而不是动画中的那些，
这使动画正常工作，但现在下拉菜单没有正确溢出，它们是可滚动的。

我在某处读到这是因为当您将overflow-x 或overflow-y 设置为visible 而另一个设置为不同于visible 的东西 时，visible 的处理方式类似于@ 987654329@
我不知道这是真的还是仍然如此。

我认为更简单的解决方案是让 overflow-x: hidden 在动画中正常工作，就像在 chrome 上一样。

我该如何解决这个问题？

【问题讨论】：

溢出：自动；可能会对你有所帮助。
这只是在我尝试时添加了一个滚动条。

标签： html css animation overflow

【解决方案1】：

您应该在使用属性之前检查浏览器的兼容性。您可以使用 https://caniuse.com/ 检查。

【讨论】：

我使用的哪个属性不兼容？据我所知：overflow-x: hidden 在我直接在动画容器上使用时有效。它也与溢出-y 混淆（在 chrome 和 safari 顺便说一句），这就是为什么这不能解决我们的问题。但是，当我仅在动画关键帧中使用它时（仅在 safari 上），它不再起作用。