Всем привет! Вроде, я далеко не новичок в HTML-CSS, но иногда возникают головоломные вопросы. Вот воспроизводимый кусок кода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
min-height: 100vh;
background-color: black;
}
.wrapper {
position: relative;
top: 60px;
transform: rotateX(90deg) scale(0);
animation: flight 1.5s ease-in-out forwards;
}
@keyframes flight {
to {
transform: rotateX(50deg) scale(1);
}
}
.vinyl {
position: relative;
width: 450px;
height: 450px;
background-color: red;
border-radius: 50%;
animation: rotation 12s linear infinite 3s;
}
@keyframes rotation {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(-360deg);
}
}
.warning {
position: absolute;
width: 105%;
height: 105%;
top: -7px;
left: -15px;
}
.warning text {
font-size: 5px;
font-weight: 500;
fill: white;
transform: rotateZ(-70deg);
transform-origin: 50% 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="vinyl">
<svg class="warning" width="450" height="450" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg">
<path id="spiral" style="display:inline;fill:none;fill-rule:evenodd;stroke:none;stroke-width:.0750443"
d="M42.56 11.55c2.213 1.212 5.243 7.313 5.522 13.066.648 13.413-8.465 22.991-21.887 22.937C15.32 47.509 5.941 38.12 5.893 26.387 6.59 14.11 16.375 6.444 26.743 6.422c9.677-.02 16.072 7.939 16.418 18.383.375 11.326-7.027 18.057-17.144 18.019-8.46-.032-15.738-7.48-15.673-16.628.06-8.392 6.526-15.59 14.464-15.505 8.707.092 13.934 5.951 13.831 13.78-.113 8.678-4.97 13.737-12.805 13.473-5.96-.2-11.075-5.466-10.884-11.947.168-5.69 3.886-10.46 9.25-11.262 4.005-.598 8.664 1.744 8.932 6.845.318 6.044-3.382 11.582-7.49 11.253" />
<text>
<textPath href="#spiral">Something happened or the requested page not found. Please, reload, try the menu
above the page or go back to the main page.
</textPath>
</text>
</svg>
</div>
</div>
</body>
</html>
Проблема такая: в конце анимации со scale, когда диск долетает до своего постоянного места, текст, который следует по спирали svg, дёргается и корректируется визуально, что выглядит отвратительно. Советы с просторов Stack Overflow:
- прописать точные размеры в svg - я заменил % на px,
- добавить backface-visibility: hidden,
- transform-style: preserve-3d
не помогают мне (( Интересно, что в Firefox такой проблемы нет, она есть только в Chrome и Edge (другими браузерами не располагаю, было бы интересно протестировать дальше). Если это баг хрома, может, есть какие-то обходные пути? Вопрос немного помогает решить замена ease-in-out в анимации flight на linear - текст почти незаметно дёргается, но хотелось бы решить эту проблему кардинально, а не костыльно. Может, кто-то сталкивался с таким