Chrome размывает текст при чистом повороте 0, но я не могу воспроизвести его вне среды

Общеизвестно, что в Chrome возникают проблемы с отображением текста при вращении сети, не стирая его. Однако при чистом вращении 0 (например, вращение элемента контейнера +1deg и самого текста или другого контейнера -1deg) это не должно иметь место, так как смещение равно 0. И действительно, в образце, который я приготовил здесь, если вы посмотрите на это в Chrome, вы должны увидеть, что текст не размыт:

.container {
  background: linear-gradient(46deg, #fff, #f2f2f2, #e8e8e8);
  background-size: 600% 600%;
  animation: backgroundGradient 30s ease infinite;
  max-width: 85%;
  position: relative;
  margin: 5%;
  padding: 5vw;
  transform: rotate(-.5deg);
  outline: 1px solid transparent;
}

.sheet {
  transform: rotate(0.5deg);
  font-size: 16px;
}

html,
body {
  min-height: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, #e43624, #e74b3b, #ea6052);
  animation: backgroundGradient 30s ease infinite;
  background-size: 600% 600%;
  overflow-x: hidden;
  font-size: 16px;
  font-family: Sarala;
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Sarala%7CGochi+Hand" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="sheet">
      <section>
        <p>
          This is a long block of text with the rotation system. Yay. Let's see if this works
        </p>
      </section>
    </div>
  </div>
</body>

</html>

Теперь вы можете подумать, что это много стилей, которые не имеют смысла, и вы были бы правы - потому что проблема в том, что точно такая же ситуация не работает на моем сайте портфолио. Если вы перейдете по https://mashedkeyboard.me/ в Chrome, то обнаружите, что текст все еще немного размыт, несмотря на то, что вся настройка была воспроизведена в примере выше.

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

Единственное, что я могу сделать, чтобы решить эту проблему, это активировать :hover на изображении профиля на стороне сайта, которое появляется в отладчике Chrome Layer как выравнивание всей страницы до одного слоя на время поворота по какой-то причине - но это невозможно применить навсегда.

Ни одна из этих проблем не влияет на Firefox или Edge вообще; оба отрисовывают текст плавно, без проблем.

Я немного озадачен на этом этапе. Если у кого-то есть идеи по поводу 1) почему это происходит в первую очередь или 2) как можно обойти это, они будут очень благодарны.

Источник

1 ответ

Решение

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

Источник
Другие вопросы по тегам