Is there a way to have a webpage that takes up the full height and width of the client window, but restricts scrolling on mobile devices? I want to position div elements using absolute positioning with specific transformations, such as playing cards on a table with x, y, and rotation attributes. While everything works correctly on desktop, on mobile devices when an absolutely positioned element extends beyond the parent boundaries, the browser adds a scrollbar allowing users to scroll to the out-of-bounds elements. I've tried using clip-path: inset(0) on the parent to limit the rendering of these elements, but mobile pages still allow scrolling over white space beyond the application area. Are there any other methods to confine the viewport to just the body and maintain a full-page, non-scrolling experience? The use of overflow: hidden doesn't seem effective in this case due to the absolute positioning.
For reference, here's an example:
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<div class="square"/>
</div>
</body>
</html>
body {
margin: 0;
overflow: hidden;
}
.app {
background-color: red;
min-height: 100vh;
clip-path:inset(0);
}
.square {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
transform: translate(330px, 50px) rotate(20deg);
}