Мобильная версияСтолкнулся ли я с пограничным случаем, вызывающим ошибку рендеринга, или я написал какой-то ужасный CSS?
Чтобы повторить это, я написал следующую демонстрацию:
Элемент body вкладывает элемент square, у которого есть дочерний элемент span, содержащий некоторый текст.
здравствуйте Элемент body управляет атрибутом perspective, чтобы translateZ мог работать, но по какой-то причине этот реквизит срабатывает только после анимации наведения закончил играть.
* { стиль преобразования: сохранение-3d; } тело { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 500 пикселей; контур: 1 пиксель, сплошной красный; перспектива: 1000 пикселей; } .квадрат { позиция: абсолютная; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 100 пикселей; ширина: 100 пикселей; цвет фона: синий; внизу: 0; непрозрачность: 0; переход: 500 мс; } тело:hover .square { внизу: 300 пикселей; непрозрачность: 1; } .квадратный интервал { белый цвет; размер шрифта: 24 пикселей; семейство шрифтов: без засечек; трансформировать: TranslateZ(45px); } Я тестировал этот пример в Edge, Chrome и Firefox, и все они получили одинаковые результаты, поэтому мне действительно интересно, что я здесь делаю не так. Вот ссылка на код.
Чтобы лучше понять проблему, я также прикрепил гифку, чтобы еще больше продемонстрировать проблему.
Обратите внимание, как текст span, который преобразуется по оси Z, переходит к свойству transform: TranslateZ(45px) сразу после завершения перехода. Этот эффект можно заметить еще лучше, изменив значение пикселей, на которые преобразуется span.
Мне бы очень хотелось знать, что происходит и как это предотвратить. Спасибо!
