Some of our users reported not being able to scroll on our site anymore. After debugging we found that this was happening for users who are on Chrome v90. Chrome v89 seems to work fine.
This seems to be caused by a pretty specific combination of css, see the minimal example below. You can also find a working example on jsfiddle.
div {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
body {
display: flex;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100%;
background-color: #FFFFFF;
}
#container {
flex: 1;
max-height: 100%;
}
#root {
flex: 1;
width: 100vw;
height: 100vh;
}
#scrollview {
display: flex;
overflow: scroll;
width: 50%;
height: 100%;
}
#big {
width: 100%;
height: 2000px;
background-image: linear-gradient(#FA0050, #000000);
}
<div id="container">
<div id="root">
<div id="scrollview">
<div id="big">
Scroll me!<br><br>
I can scroll on chrome v89<br>
I cannot scroll on chrome v90
</div>
</div>
</div>
</div>
In the above snippet, scrolling works (Windows & MacOS):
- Version 89.0.4389.114 (Official Build) (x86_64)
In the above snippet, scrolling does not work (Windows & MacOS):
- Version 90.0.4430.72 (Official Build) (x86_64)
Fixing the issue with css is relatively straightforward, however I am interested in finding out why the scrolling no longer works on v90. What exactly has Chrome changed that stops it from working? Did they change something intentionally or is this a bug?

