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

У меня есть столбец начальной загрузки, содержащий 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 state). Он работал в Safari 9, он только переставал работать, когда я обновлялся.

Я попытался удалить свойства css по одному, добавив "position: relative", а также каждую опцию переполнения, и ничего не работает. Я также попытался найти похожие проблемы (элементы исчезают только в Safari), и ни один из них не работал до сих пор.

Но что странно, если я изменяю любое свойство css в браузере, например, если я удалю "height: 6em", а затем верну его обратно, div показывает. Если я начну добавлять другое свойство css, элемент покажет, прежде чем я даже закончу печатать.

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

Ответ 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;
}

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

Ответ 2

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

Ответ 3

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

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

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