Context: I am using Tailwind CSS with an Angular project. The app has an app-component and app-layout component. Base CSS for the Project: @layer base { html { display: flex; flex-direction: column; @apply h-screen w-screen; } body { @apply h-full w-full m-0 p-0 bg-white font-medium text-[#77767A]; font-family: 'Lato'; } } App Component: <app-layout></app-layout> App Component's CSS File: :host { @apply h-full w-full; } App Layout Component's Template: <div class="h-full flex flex-col w-full layout !bg-red-500 p-8"> <div class="h-full bg-white flex items-center justify-center">hello</div> </div> App Layout Component's CSS File: :host { @apply flex flex-col; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (pointer: none), (pointer: coarse) { .layout { position: fixed; height: 100%; } } Issue: When I open the app in the browser, the rendered page's view is affected in a way that I can't fully understand. I noticed the following: When the keyboard is open: The page layout is distorted. When the keyboard is closed: The page layout is displayed as expected. Additionally, I’ve attached images for better understanding: When the page is first opened (with the keyboard open): When the window is touched (keyboard open): What I’ve Identified: It seems that when the keyboard opens on mobile devices or similar environments, the layout gets affected. When the keyboard is closed, the page is displayed as expected. Could anyone suggest a solution or point out what might be causing this issue? Thanks in advance! Continue reading...
