I am working on a React app, and I've encountered a layout issue when viewing the app in mobile device emulation at 50% zoom in Chrome DevTools. A gray border appears only on the right and bottom sides of the mobile viewport, as shown in the screenshot below.
Screenshot:
What I've Tried: Ensuring html and body have width: 100%, height: 100%, and overflow: hidden; Setting the main container to width: 100vw and height: 100vh to ensure it fills the viewport Using a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Verifying that no extra padding, margins, or borders are applied to the main container or body
Testing the app at 100% zoom, where the issue does not occur Despite these changes, the gray border remains at 50% zoom. I've verified that this issue occurs in Chrome's mobile emulation mode but not at full zoom (100%).
My Setup: React app using functional components Testing in Chrome DevTools, iPhone SE emulation mode Zoom level set to 50% Question: How can I prevent the gray border from appearing on the right and bottom sides when viewing the app at 50% zoom? Is there a specific CSS rule or layout setting that could resolve this issue, or is this a browser rendering problem?