Хорошо известно, что в 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) как можно обойти это, они будут очень благодарны.