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 Debugger как сглаживание всей страницы в один слой на время вращения для некоторых причина - но это невозможно применить постоянно.
Ни одна из этих проблем не влияет на Firefox или Edge; оба отображают текст плавно и без проблем.
Я немного озадачен на этом этапе. Если у кого-то есть идеи по 1) почему это происходит в первую очередь или 2) как можно было бы обойти это, они были бы очень признательны.
Ответы 1
Для всех, кто ищет эту проблему по какой-либо причине, оказывается, что это ошибка компоновки Blink. Это активно работает на данный момент.