Как работать с анимированным элементом, отображаемым в виде черного квадрата (ошибка Chrome)? - PullRequest
Новая
       51

Как работать с анимированным элементом, отображаемым в виде черного квадрата (ошибка Chrome)?

0 голосов
/ 09 июля 2019

Chromium версия 75.0.3770.100 (Официальная сборка) Arch Linux (64-bit).
Также наблюдается на Android в Brave (также на основе Chromium 75).

Я делаю вращающийся квадрат, заполненный белым градиентом: 

.spinning {
  animation-name: spinning;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);
  backface-visibility: hidden;
}

@keyframes spinning {
  0% { transform: rotate3d(1, -1, 0, -180deg); }
  100% { transform: rotate3d(1, -1, 0, 180deg); }
}
<div class="spinning"></div>

Это отлично работает в Firefox. Однако в Chrome я изначально вижу черный квадрат, а не белый. Как будто Chrome забыл визуализировать слой элемента. Кроме того, ось вращения немного смещена от центра. Когда я щелкаю правой кнопкой мыши по квадрату и выбираю «Осмотреть», он внезапно осознает ошибку своих путей и становится белым.

Похоже, я сталкиваюсь с выпуском 966019 , который появился в Chrome 75 или, может быть, 74 и был подтвержден и назначен, но еще не исправлен.

Стоит отметить:

  • A background-color в дополнение к * background-image делает квадрат более ярким, чем черный.
  • Если я помещу какой-то текст в div, я получу невидимый квадрат, а не черный.

Обходные:

  • Этого не происходит с backface-visibility: visible. Но мне нужно, чтобы он был скрыт, потому что квадрат в моей реальной ситуации имеет две стороны разного цвета, созданные двумя такими вращающимися квадратами, которые смещены на 180 градусов по фазе.
  • Это не происходит с простым background-color вместо градиента. Но градиент необходим, чтобы соответствовать остальной части стиля.
  • Этого не произойдет, если я начну вращение с 0deg и пройду 360deg. Но тогда это началось бы одновременно с «передней» стороной.

Поскольку все они имеют нежелательные побочные эффекты, я ищу лучший обходной путь.

Ответы [ 3 ]

1 голос
/ 09 июля 2019

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

.spinning {
  animation-name: spinning;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100px;
  height: 100px;
  position: relative;
  transform-style:preserve-3d;
}
.spinning:before,
.spinning:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
}
.spinning:before {
  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);
}
.spinning:after {
  transform: rotateY(180deg);
  background:rgba(255,0,0,0.5);
}

@keyframes spinning {
  0% {
    transform: rotate3d(1, -1, 0, -180deg);
  }
  100% {
    transform: rotate3d(1, -1, 0, 180deg);
  }
}
<div class="spinning"></div>
0 голосов
/ 09 июля 2019

Наконец-то решил, что не полагаясь на backface-visibility, а просто оживив visibility себя: 

.spinning {
  animation-name: spinning, hide-backface;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear, step-start;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);
}

@keyframes spinning {
  0% { transform: rotate3d(1, -1, 0, -180deg); }
  100% { transform: rotate3d(1, -1, 0, 180deg); }
}

@keyframes hide-backface {
  0% { visibility: hidden; }
  25% { visibility: hidden; }
  75% { visibility: visible; }
  100% { visibility: hidden; }
}
<div class="spinning"></div>
0 голосов
/ 09 июля 2019

Еще один обходной путь - запустить анимацию для псевдоэлемента вашего элемента content свойство: 

.spinning {
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100px;
  height: 100px;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);

}
.spinning::after {
  content: "";
  animation: trigger-paint .1s forwards 1;
}
@keyframes spinning {
  0% { transform: rotate3d(1, -1, 0, -180deg); }
  100% { transform: rotate3d(1, -1, 0, 180deg); }
}
@keyframes trigger-paint {
  0% {content: ""}
  100% {content: none}
}
<div class="spinning"></div>

Но так как уловка заключается в том, что она вызывает перерисовку, я боюсь, что это приводит к огромным последствиям для производительности (в соответствии с моими инструментами разработчика, это перезапускает анимациюцелую кучу раз, хотя он и должен был пнуть один раз).

...