The landing page works fine on chrome on desktop, and chrome on iphone and occupies 100% height.
But when testing on chrome on android, the page loads lower down, then "jumps up" into place when you touch the screen or start to scroll.10s video clip showing issue here: https://drive.google.com/file/d/1XWCQrV_vf8vdxE_VwLXmoWz9e1cvotVE/view
It happens 75% of the time in chrome on android, and 100% of the time in incognito mode on chrome on android. No idea why.
I've tried using 100%, dvh, svh, reordering code - can't figure it out. Any ideas?
Also if anyone has a cross browser landing page for 100svh landing page that actually works, (or a bootstrap version) I'd love to hear too. Thanks.
Test page below with stripped out content. Need to test/open on chrome/incognito on android to see issue.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"><title>100svh android text landing page</title><style> /* Reset default margin and padding */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; height: 100%; } /* Full-width and full-height container */ .container { position: relative; width: 100vw; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: green; /* Light gray background */ } /* Logo placeholder */ .logo { width: 150px; /* Adjust size as needed */ height: 150px; /* Adjust size as needed */ background-color: #ccc; /* Gray background for placeholder */ border-radius: 50%; /* Make it round */ margin-bottom: 20px; /* Space below the logo */ } /* Lorem ipsum text */ .text { font-size: 32px; text-align: center; color: lightcyan; /* Dark text color */ }</style></head><body><div class="container"><div class="logo"></div><div class="text">this should be centered, not load lower then "jump up" into place on android. </div></div><div> one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla one<br> bla bla bla</div></body></html>