On Safari of iOS 17 and macOS Sonoma, I am encountering a layout problem where the .content element seems to be covering the .header element, resulting in unexpected rendering. This issue is not consistently reproducible across different devices or browsers.
Here's the HTML and CSS structure:
demo
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style>
.page {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
overflow: auto;
}
.header {
position: absolute;
top: 0;
background: lightblue;
height: 50px;
width: 100%;
}
.content {
height: 2000px;
background: lightcoral;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
If remove overflow in .page, or make .content not scrollable, .header shows correct that overlap .content
xiang_song
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution