100VH FLEX issue on safari mobile

So for safari mobile. 100VH ignores the mobile browser toolbar regions.
Resulting in hiding a portion of the flex 100VH region.

Any thoughts on a work around in Webflow or would this need custom code?

A way to target safari mobile only? 90VH is just fine.

Thanks!
J

SAFARI MOBILE

GOOGLE CHROME MOBILE

FOOTER is fixed at 80px

100VH container

I am not the only one seems like…

https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

anyone with tips on a google online multi browser desktop/mobile testing platform. I know there are a lot out there… but would be handy to have!

cheers

here’s the site!

http://healthyforestfacts.org/

https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

Super interesting. Long story short: no solution in this post. You may have to design with this limitation in mind.

I tried this solution but the code is visible on the top. it does work though. sort of… seems to be called a READER view.

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fullheight {
		height: 768px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fullheight {
		height: 1024px;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 568px;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 480px;
	}
}

my flex global floating footer dreams are being shattered!

Code works but it always shows up in the browser view…
SAFARI MOBILE
code is still visible

SAFARI MOBILE
once you scroll a down.

Can you share your read-only link?

I took out that code, but this is something Webflow should have “baked” in if it’s to be a true WYSIWYG editor.

Because without it, it really involved more debugging after the fact and webflow dev cannot assume it will look 100% the same on all devices and OS’.

https://preview.webflow.com/preview/healthyforestfacts?preview=025d905c4219ff3e2848cbd97cd63146

1 Like

Can you show me how you added the code? (screenshot)

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.