Блог

Вот как это выглядит, пока не будет выполнена анимация непрозрачности:

Это то, что происходит, когда я пытаюсь выделить текст:

Проблема, похоже, исчезает, когда я удаляю: transform-style: preserve-3d; .

Воспроизведение онлайн:https://jsfiddle.net/alvarotrigo/z7d0jhk2/22 /

Код HTML:

 <div class="section">
    <h1>Hello man!</h1>
    <h1>Hello man!</h1>
</div>
  

CSS:

 .section {
    height: 500px;
    width: 100%;
    background: red;
    transition: transform 1000ms ease;
    display: table;
    table-layout: fixed;
   transform-style: preserve-3d;
}

.section.active {
    transform: rotate3d(1, 1, 0, 35deg);
}

h1,
.section {
    transition: opacity 10000ms ease;
}

h1 {
    opacity: 0;
    font-size: 8em;
}

h1.active {
    opacity: 1;
}
  

Используется последняя стабильная версия Chrome 73.0.3683.86 (официальная сборка) (64-разрядная версия) для Mac OS Mojave 10.14.3.

Я не могу воспроизвести ошибку ни в Firefox, ни в Safari.