15

我有一个引导列，其中包含一个标题 div，它是 React Web 应用程序中的另一个引导行。

容器有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 属性，并添加“位置：相对”以及每个溢出选项，但没有任何效果。我还尝试查找类似的问题（元素仅在 Safari 中消失），但到目前为止也没有一个有效。

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

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

4

3 回答 3

7

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

希望这可以帮助！

于 2017-05-07T19:48:52.500 回答
6

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

于 2017-05-02T10:47:36.367 回答
0

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

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

if (navigator.userAgent.indexOf("Mac OS X 10") > -1
  && navigator.vendor.indexOf("Apple") > -1) {
于 2017-05-02T23:25:05.643 回答