javascript - 元素仅在 Safari 10 中消失(9 没问题)，当我更改任何 css 时显示

Question

我在 React 网络应用程序中有一个包含标题 div 的引导列，这是另一个引导行。

容器有CSS:

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

标题行有 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 中消失)，但到目前为止这些问题都没有奏效。

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

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

Answer 1

这是我在 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;
}

希望这对您有所帮助!