CSS переход происходит при загрузке в Opera (тогда как это не должно происходить) - PullRequest
Новая
       36

CSS переход происходит при загрузке в Opera (тогда как это не должно происходить)

0 голосов
/ 14 ноября 2018

Вот HTML / CSS для воспроизведения:

index.html 

<!DOCTYPE html>
<html lang="fr">
<head>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <div class="foo">Mmh... sexy!</div>
</body>
</html>

style.css 

.foo {
    width: 500px;
    height: 500px;
    line-height: 500px;
    color: #fff;
    font-size: 50px;
    text-align: center;
    background: #f0f;
    transform: scale(0);
    transition: transform 4s;
}

Шаги для воспроизведения:

  1. Сохраните эти два файла в одном месте и откройте index.html в опере

  2. Скопируйте URL, откройте новую вкладку, вставьте URL и действительный

Фактический результат:

Вы увидите уменьшающийся розовый квадрат

Ожидаемый результат:

Страница должна быть пустой (как в Chrome, Firefox или любом другом браузере).

Что на самом деле происходит:

Свойство transform анимируется, как если бы начальное состояние div было transform: none, тогда как его реальное начальное состояние transform: scale(0).

Это никогда не происходит, когда вы перезагружаете страницу. Только когда вы открываете его в новой вкладке или загружаете этот веб-сайт после другого веб-сайта (например, «https://google.fr' затем этот веб-сайт).

Также интересно отметить, что если вы копируете / вставляете CSS прямо в html (в теге <style> в <head>), все работает отлично.

Ошибка, похоже, связана с веб-набором, потому что я могу воспроизвести ошибку на Chrome с очень сложными компоновками.

Например, этот веб-сайт, с которым я борюсь: https://hinderer -wolff.fr /

Когда вы открываете его впервые, белый прямоугольник уменьшается, а заголовок анимируется вперед, затем исчезает, а затем неожиданно появляется без перехода.

Если вы перезагрузите страницу, анимация будет идеальной, а белого прямоугольника нет.

...