💥 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
'Development > Frontend' 카테고리의 다른 글
Elog: Next.js and window object (0) | 2024.05.02 |
---|---|
Elog: Event Bubbling (0) | 2024.05.02 |
[회원 정보 수정] react-hook-form (0) | 2023.07.19 |
[게시글 상세] 댓글 대댓글 CRUD (1) | 2023.07.01 |
[게시글 상세] 게시글 상세 페이지 구조 (0) | 2023.06.22 |