Нерабочий текст в Chrome при использовании transform-style: preserve-3d; на повернутый контент с непрозрачностью - PullRequest
Новая
       47

Нерабочий текст в Chrome при использовании transform-style: preserve-3d; на повернутый контент с непрозрачностью

0 голосов
/ 01 апреля 2019

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

enter image description here

Вот что происходит, когда я пытаюсь выделить текст: enter image description here

Кажется, проблема исчезла, когда я удалил: 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.

...