i have a webpage with two fixed blocks — on a top and on a bottom.
when i scroll it in safari on ios, there's some lag, when bottom safari bar collapses or expands — is it possible to make it smoother?
that's how it looks: https://i.stack.imgur.com/BFECv.gif
code:
body {
width:100vw;
height: auto;
min-height: 100vh;
overflow: scroll;
background: white;
color: black;
margin: 0;
padding: 0;
position: relative;
}
div {
display: block;
}
#wrap {
margin: 0 2.7vw;
padding: 2.7vw 0;
width: 94.6vw;
height: auto;
min-height: 100vh;
float: left;
overflow: hidden;
display: block;
position: relative;
}
#int {
position: fixed;
width: inherit;
z-index: 999;
}
#top {
width: inherit;
height: 9vw;
border-radius: 4.5vw;
box-shadow: 0 0 7.1vw rgba(255, 0, 255, 0.3);
background-color: white;
opacity: 1;
top: 5.4vw;
position: fixed;
}
#bottom {
width: inherit;
height: 9vw;
border-radius: 4.5vw;
box-shadow: 0 0 7.1vw rgba(255, 0, 255, 0.3);
background-color: white;
opacity: 1;
bottom: 5.4vw;
position: fixed;
}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="wrap">
<div id="int">
<div id="top">
<span id="back">←</span>
<span id="logo">гей-пропаганда</span>
<div id="pacific"></div>
</div>
<div id="bottom">
<span id="share">распространить: <a href="">тг</a>, <a href="">тв</a>, <a href="">фб</a>, <a href="">вк</a></span>
</div>
</div>(yes, i use viewport width 'cause i'm a designer and i can)
link to open on your phone: http://chudovotapolesbiyski.surge.sh/
thank you