Go to main content
Development/Frontend

Elog: Overflow-X Hidden Issues on Mobile Devices

by Nyangbari 2024. 5. 2.

💥 Issue

export default function RootLayout({children}: {children: React.ReactNode;}) {
    return (
      <html lang="en">
        <body className="w-full h-full box-border overflow-x-hidden">
          <main>{children}</main>
        </body>
      </html>
    );
}

I added the overflow-x-hidden to prevent a background image from overflowing horizontally. However, this solution only worked on desktop browsers and did not apply on mobile devices.

 

💡 Resolution

To fix this issue consistently across all devices, I adjusted the CSS settings as follows:

html {
    overflow: hidden;
}

body {
    overflow: hidden;
    position: relative;
}

By setting both the html and body tags to overflow: hidden and positioning the body relatively, I was able to control the overflow behavior effectively on both desktop and mobile platforms.

 


References:

https://stackoverflow.com/questions/24193272/overflow-xhidden-on-mobile-device-not-working

 

Overflow-x:hidden; on mobile device not working

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and

stackoverflow.com

https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers

 

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I have a website here. Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden. In any mobile browser, whether Android ...

stackoverflow.com