Encountered an issue specific to Safari on iOS.
Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling.
In iOS Safari, the fixed header appears slightly larger than the viewport and scrolls at a different speed compared to the rest of the content.
Tried simplifying the code provided below but still unable to resolve the problem - works fine on all other browsers except for iOS (targeting IE8+).
Example showcasing the issue can be accessed here.
Appreciate any advice or assistance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
img{
height: 100%;
}
#pad{
height:6em;
padding-bottom:1px;
}
#header{
position:fixed;
width:100%;
height:6em;
border-bottom:1px solid;
}
.menuRight{
float:right;
}
</style>
</head>
<body>
<div id="header">
<div class="menuRight"><h2>Menu</h2></div>
<h1>Testing scroll on iPhone</h1>
</div>
<div id="pad"></div>
<div id="dgs2">
<img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
</div>
</body>
</html>