<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
<title>Webkit scroll resetting on hover bug</title>
</head>
<body>
<div class="content">
<h2 class="space-fill">Scroll down!</h2>
<div class="button-wrapper">
<div class="button unbugged">
I am fine to hover on!
</div>
<div class="button bugged shadow">
I have a `box-shadow`!
</div>
<div class="button bugged textdecor">
I have `text-decoration`!
</div>
<div class="button bugged display">
I have `display`!
</div>
</div>
</div>
</body>
</html>
body {
display: grid; /*this causes the bug*/
height: 100vh; /*this causes the bug*/
overflow: hidden;
margin: 0;
padding: 0;
font-family: roboto, sans-serif;
}
.content {
overflow-y: scroll; /*this causes the bug*/
}
.space-fill {
min-height: 100%;
font-size: 10em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background: repeating-linear-gradient(
45deg,
white,
white 10px,
#0002 10px,
#0002 20px
);
}
.button-wrapper {
margin: 50px auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
max-width: max-content;
}
.button {
background: #0002;
padding: 20px 30px;
text-align: center;
}
.button:not(:last-child) {
margin-bottom: 20px;
}
.button.unbugged:hover {
background: #0f04;
}
.button.bugged:hover {
background: #f004;
}
.button.bugged.shadow:hover {
box-shadow: 0 0 red; /*this causes the bug*/
}
.button.bugged.textdecor:hover {
text-decoration: underline; /*this causes the bug*/
}
.button.bugged.display:hover {
display: inline; /*this causes the bug*/
}