I am looking to add a unique fly-in animation using CSS, where a specific block will scale from 10 to 1.
However, when I implement the scaling, a horizontal scroll bar appears:
https://jsfiddle.net/r2a5w7fo/15/
body
{
font: 10svw sans-serif;
text-align: center;
}
#zoom
{
color: gray;
scale: 3;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
This is a test line.
</p>
<p id="zoom">
This is a zooming test line.
</p>
<p>
This is a test line.
</p>
</body>
</html>
Is there a way to prevent scaling from affecting the document flow? I want the document's scrollbars to behave as if the scale was always "1".