I'm trying to use a element that stays fixed on the screen, so I’ve applied:
dialog {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
overflow: auto;
}
On desktop browsers, this works fine — the is fixed, and no parent scrollbars appear.
However, on mobile browsers (iOS Safari and Android Chrome), I notice:
The sometimes overflows the viewport.
The parent briefly shows scrollbars when the dialog opens.
position: fixed doesn’t seem to behave the same way as on desktop.
I’ve read about 100dvh and 100dvw units, but I’m not sure if using them for width/height will solve this problem consistently across devices.
My questions:
Why does position: fixed behave differently on mobile for ?
How can I make a mobile-proof fixed that never causes parent scrollbars?
Should I use 100dvh / 100dvw for width and height, or is there a better approach?
Things I’ve tried:
Using max-height: 100vh with overflow-y: auto.
Wrapping content inside a scrollable div.
-webkit-overflow-scrolling: touch for smooth scrolling.
Environment:
iOS Safari 17+, Android Chrome 120+
This code doesn't have that issue. Does it solve your problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
dialog {
position: relative;
border: 1px solid black; /* Default is 2px. */
}
dialog::backdrop {
background-color: salmon;
}
#closeButton {
font-size: 1.5em;
line-height: .75em;
position: absolute;
right: 0;
top: 0;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 3px;
}
#closeButton:hover {
cursor: pointer;
background-color: black;
color: white;
}
</style>
</head>
<body>
<dialog>
<div id="closeButton" onclick="this.parentNode.close()">×</div>
<p>This is a dialog box.</p>
</dialog>
<script>
document.getElementsByTagName('dialog')[0].showModal(); // Or show() for a non-modal display.
</script>
</body>
</html>