Encountering a strange issue that I can't seem to figure out. When testing the code in Safari, hovering over the select field causes the .page div to scroll to the top.
This behavior only occurs when .page is within a grid layout and there's a select:hover rule in place. Height constraints without the grid structure work fine without this scrolling problem.
If anyone has any insights into why this might be happening, I'd appreciate some guidance.
Just to note, this works as expected in Chrome and Firefox.
.site {
display: grid;
grid-template-areas: "sidebar header""sidebar page";
grid-template-columns: auto 1fr;
grid-template-rows: 60px 1fr;
height: 200px;
}
aside {
grid-area: sidebar;
background-color: #e3e3e3;
color: transparent;
}
header {
grid-area: header;
background-color: #cccccc;
color: transparent;
}
.page {
grid-area: page;
overflow: scroll;
background-color: #fff;
}
.spacer {
padding: 100px 0;
}
select:hover {
color: red;
}<div class="site">
<aside>
Sidebar
</aside>
<header>
Header
</header>
<main class="page">
<div class="spacer">Scroll down...</div>
<label for="test">Hover the select</label>
<select name="test" id="test">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
<div class="spacer">More content...</div>
</main>
</div>