mirror of
https://github.com/RGBCube/serenity
synced 2025-05-15 11:54:58 +00:00
9dddd6b028
This change addresses an issue with overflow clipping in scenarios where `overflow: hidden` is applied to boxes nested within elements with `overflow: scroll`. Fixes https://github.com/SerenityOS/serenity/issues/22733
64 lines
1.6 KiB
HTML
64 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html" />
|
|
<style>
|
|
html {
|
|
background: white;
|
|
}
|
|
body {
|
|
position: absolute;
|
|
inset: 0px;
|
|
display: flex;
|
|
background: pink;
|
|
}
|
|
#outer {
|
|
margin-top: 100px;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
background: orange;
|
|
}
|
|
#inner {
|
|
height: 1000px;
|
|
background: magenta;
|
|
}
|
|
.item {
|
|
box-sizing: border-box;
|
|
border: 1px solid black;
|
|
width: 200px;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
background: lime;
|
|
}
|
|
</style><body><div id="outer"><div id="inner">
|
|
<div class="item">1</div>
|
|
<div class="item">2</div>
|
|
<div class="item">3</div>
|
|
<div class="item">4</div>
|
|
<div class="item">5</div>
|
|
<div class="item">6</div>
|
|
<div class="item">7</div>
|
|
<div class="item">8</div>
|
|
<div class="item">9</div>
|
|
<div class="item">10</div>
|
|
<div class="item">11</div>
|
|
<div class="item">12</div>
|
|
<div class="item">13</div>
|
|
<div class="item">14</div>
|
|
<div class="item">15</div>
|
|
<div class="item">16</div>
|
|
<div class="item">17</div>
|
|
<div class="item">18</div>
|
|
<div class="item">19</div>
|
|
<div class="item">20</div>
|
|
<div class="item">21</div>
|
|
<div class="item">22</div>
|
|
<div class="item">23</div>
|
|
<div class="item">24</div>
|
|
<div class="item">25</div>
|
|
<div class="item">26</div>
|
|
<div class="item">27</div>
|
|
<div class="item">28</div>
|
|
<div class="item">29</div>
|
|
<script>
|
|
const scrollContainer = document.getElementById("outer");
|
|
scrollContainer.scrollTop = 500;
|
|
</script>
|