Элемент исчезает только в Safari 10 (9 был в порядке), показывает, когда я меняю любой CSS

Question

У меня есть столбец начальной загрузки, содержащий div заголовка, который является еще одной строкой начальной загрузки, внутри веб-приложения React.

Контейнер имеет 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: относительный", а также каждый параметр переполнения, и ничего не работает. Я также попытался найти похожие проблемы (элементы исчезают только в 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;
}

Надеюсь это поможет!

Answer 2

Вы можете попробовать настройки -webkit-transform: translate3d(0,0,0); на элемент, чтобы заставить обработку GPU. Это сработало для меня по аналогичной проблеме.

Answer 3

Мне удалось переместить нарушающий элемент в компонент под ним, так как этот компонент перерисовывался каждый раз, когда его состояние изменялось. Я не думал, что смогу переместить это сначала, но я нашел способ. Я предполагаю, что в Safari все еще есть ошибка, но в любом случае я нашел способ ее обойти.

И в любом случае, если бы нужно было несколько раз подряд менять стиль (цикл с тайм-аутом), это было бы ужасно и ужасно, но при этом элемент оставался видимым, и по крайней мере вы можете ограничить его Safari 10:

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