Chrome ошибка рендеринга с css прозрачными пленками - PullRequest
Новая
       65

Chrome ошибка рендеринга с css прозрачными пленками

0 голосов
/ 28 апреля 2020

Это немного сложно объяснить, но я сделаю все возможное.

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

Во-первых, в левой части веб-сайта есть поле, в котором для создания элемента используется псевдоэлемент (в этом случае - after). эффект 'drop-shadow', используя линейно-градиентную заливку и фильтр размытия. Это выглядит так:

Block with shadow

Затем есть кнопка меню, которая находится на левой границе веб-сайта, и кнопка имеет простой «пульс» 'анимация, просто расширяющийся круг, который исчезает.

Однако, импульсная анимация "отсекает" тень от первого элемента, и я понятия не имею, почему. Вот пара скриншотов:

Clipping example 1

Clipping example 2

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

.container {
  margin-left: 50px;
}
.container .card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 280px;
  max-width: 280px;
  height: 110px;
  border-radius: 8px;
  background: linear-gradient(180deg, #768ef9 0%, #a279fb 100%);
  transform-style: preserve-3d;
  font-family: sans-serif;
  color: white;
}
.container .card::after {
  position: absolute;
  bottom: -5px;
  left: 5%;
  display: block;
  width: 90%;
  height: 50px;
  content: "";
  transform: translateZ(-1px);
  background: linear-gradient(180deg, #768ef9 0%, #a279fb 100%);
  filter: blur(20px);
}

.burger {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 120px;
  left: 0;
  width: 39px;
  height: 39px;
  pointer-events: all;
  border: 0;
  border-radius: 100%;
  background-color: #7f8cf9;
  box-shadow: 0 0 0 0 #7f8cf9;
  animation: pulse 3s;
  animation-iteration-count: 87;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(127, 140, 249, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 30px rgba(127, 140, 249, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(127, 140, 249, 0);
  }
}
<div class="app">
  <div class="container">
    <div class="card">
      <div class="block">
        <span>Logo</span>
      </div>
    </div>
  </div>
  <div class="burger">

  </div>
</div>

Вот скрипка с css, скопированная из самого проекта (скорректированная): https://jsfiddle.net/t53eyad0/

Используйте переменные в верхней части s css, чтобы отрегулировать положение элементов, но эффект виден: 

$burger-top
$container-margin

Есть ли способ обойти это или иметь возможность отладить точное причина?

...