Ever since the release of iOS 14, I've noticed that content within a div element with an 'overflow-y: scroll' property no longer functions properly on Safari. Does anyone happen to have a solution for this? (Or maybe my code just needs some tweaking.)
I'm not sure why this issue has cropped up now – unfortunately, I don't have access to debugging tools on my phone which makes it harder to diagnose. Everything was working fine under iOS 13.6.
As an example, here's a snippet of the code:
<html lang="fr">
<style>
html{
background-color: var(--background);
z-index: -9999;
}
body{
position: relative;
width: 100%;
top: 0;
left: 0;
right: 0;
margin: 0;
z-index: -9999;
}
.head{
position: relative;
display: block;
top: 0;
left: 0;
right: 0;
height: 10vh;
background-color: blue;
border-radius: 8px;
}
.emb-content{
margin-top: 2vh;
margin-bottom: 2vh;
width: 96%;
display: block;
margin-left: 2%;
margin-right: 2%;
border-radius: 10px;
height: 74.5vh;
overflow-y: scroll;
border: none;
z-index: 9999;
-webkit-appearance: none;
-webkit-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
}
.footer{
display: block;
position: relative;
height: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
}
</style>
<body>
<div class='head'></div>
<div class='emb-content'>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br...
</div>
<div class='footer'></div>
</body>
</html>