On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disrupts the sticky behavior of my header which has a position: sticky.
Is there a way to prevent the transformed elements from affecting the viewport size while still maintaining the position: sticky functionality?
Below is an example I've included:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.scale {
padding: 100px;
width: 100%;
height: 400px;
background-color: green;
transform: scale(2);
position: relative;
z-index 1;
}
header {
position: sticky;
position: -webkit-sticky;
top: 0;
left 0;
right 0;
height: 50px;
background-color: red;
z-index: 2;
}<header>I want this header to remain sticky</header>
<div class="scale">
But I don't want this div to resize the x-axis of the viewport.
</div>