元素仅在 Safari 10 中消失（9 正常），当我更改任何内容时显示 css

Question

我有一个 bootstrap 列包含一个 header div 这是另一个 bootstrap 行，在 React 网络应用程序中。

容器有 css:

height: calc(100vh - 14em);
overflow-y: hidden;
padding-left: 0;
padding-right: 0;
display: table;
border-left: thin solid #e6e6e6;

并且 header 行有 css:

border: thin solid #e6e6e6;
border-left: 2px solid #e0e0e0;
height: 6em;
margin-left: 0;
margin-right: 0;
display: table-caption;

这在除 Safari 10.1 以外的所有浏览器中都能完美运行，当容器列中的其他元素四处移动（通过 React 状态）时它会消失。它在 Safari 9 中工作，它只是在我更新时停止工作。

我试过一次删除一个 css 属性，然后添加 "position: relative" 以及每个溢出选项，但没有任何效果。我也尝试查找类似的问题（元素仅在 Safari 中消失），其中 none 到目前为止也有效。

但奇怪的是，如果我在浏览器中更改任何 css 属性，就像我删除 "height: 6em" 然后将其放入返回，div 显示。如果我开始添加另一个 css 属性，元素会在我完成输入之前显示。

我很确定这是 Safari 中的一个错误，因为它在 9 或任何其他浏览器中都不是问题...我怎样才能让它强制更新，或者更好但不需要更新？

Answer 1

您可以尝试在元素上设置 -webkit-transform: translate3d(0,0,0); 以强制 GPU 处理。这对我在类似问题上有用。

Answer 2

我设法将有问题的元素移到了它下面的组件中，因为每次状态更改时都会重新绘制该组件。一开始我不认为我可以移动它，但我想出了一个办法。我想 Safari 中仍然存在错误，但无论如何我找到了解决方法。

无论如何，如果有必要连续多次切换样式更改（循环超时）是丑陋和可怕的，但它保持元素可见，至少你可以将它限制为 Safari 10：

if (navigator.userAgent.indexOf("Mac OS X 10") > -1
  && navigator.vendor.indexOf("Apple") > -1) {

Answer 3

这是我在 Safari 中遇到这个 ~~讨厌的~~ 错误时使用的技术。

我基本上用 css 动画循环强制重绘元素：

@keyframes forceRedraw {
    from { box-shadow: inset rgba(0,0,0,0) 0 0 0; }
    to { box-shadow: inset rgba(0,0,0,0.0000001) 0 0 0 10px; }
}

.container{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: forceRedraw;
    animation-duration: 4s;
    animation-iteration-count:infinite;
}

希望对您有所帮助！

元素仅在 Safari 10 中消失（9 正常），当我更改任何内容时显示 css

Element disappears only in Safari 10 (9 was ok), shows when I change any css

javascript

css

safari

reactjs

safari10