Post not yet marked as solved
Post marked as unsolved with 1 replies, 1,259 views
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
Posted
by
xiang_song.
Last updated
xiang_song.
.