After extensive effort and research, I have successfully discovered a method to resize page elements without distortion when zooming by utilizing "vh" and "vw" units instead of "px" or "em".
The current issue arises when zooming in causes the elements to shift towards the bottom-right corner of the page.
At 100% zoom:
https://i.sstatic.net/FosaC.png
Zoomed up to 500%:
https://i.sstatic.net/aJj6J.png
We need to prevent this unexpected movement of elements while zooming. Is there a CSS-only solution to address this?
Please refrain from testing the code on platforms like Stack Snippets or CodePen due to potential discrepancies. It is recommended to create separate HTML, CSS, and JS files for testing solely on Chrome. The necessary files can be accessed through the following link:
// JavaScript code snippet
var value = 0;
// Other variables and functions here...
.container {
// CSS styles for container element
}
#progress-bar {
// CSS styles for progress bar element
}
#progress-bar:after {
// Additional CSS styles
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div id="progress-bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="script.js"></script>
</body>
</html>Edit: I have another project with stable behavior that avoids moving page content when zoomed. Feel free to request the full set of files and code if needed:
*{
overflow: hidden;
}
.container {
// Additional CSS styles for container
}
.number-ticker {
// Styling for number ticker element
}
.number-ticker .digit {
// Styles for digits within number ticker
}