Skip to content

Instantly share code, notes, and snippets.

@sorin-ref

sorin-ref/layout-issue-upon-browser-zoom.html

Created March 12, 2022 15:35
Show Gist options
  • Save sorin-ref/acdfb9362418584ce8361b47ee9d1055 to your computer and use it in GitHub Desktop.
Save sorin-ref/acdfb9362418584ce8361b47ee9d1055 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
layout-issue-upon-browser-zoom.html
<html>
<body style="text-align: center;">
<div id="container" style="background-color: red; width: 40%; display: inline-block;"></div>
<div id="reference" style="background-color: green; width: 40%; display: inline-block;"></div>
<script>
let itemCount = 1000, itemHeight = 21;
for (var i = 0; i < itemCount; i++) {
let item = document.createElement('div');
item.style.height = itemHeight + 'px';
item.style.backgroundColor = i % 2 == 0 ? '#f0f0f0' : '#e0e0e0';
container.appendChild(item);
}
let totalHeight = itemCount * itemHeight;
container.style.height = totalHeight + 'px';
reference.style.height = totalHeight + 'px';
</script>
</body>
</html>
@sorin-ref
Copy link
Author

The red background shouldn't be there at all, at the bottom of the browser window, but it does appear on certain zoom browser levels, e.g. 85% on Safari (macOS):
image

@sorin-ref
Copy link
Author

sorin-ref commented Mar 14, 2022 •
edited
Loading

Eventually, I've simply decided to scale down the reference element based on the left "grid"'s actual height (not "reference" anymore, indeed). 🙃

let totalHeight = itemCount * itemHeight;
// container.style.height = totalHeight + 'px';
reference.style.height = totalHeight + 'px';
reference.style.transform = 'scaleY(' + (container.clientHeight / reference.clientHeight) + ')'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment