▼
Streaming live at 10am (PST)

100VH FLEX issue on safari mobile

#1

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

#2

SAFARI MOBILE

IMG_7218 (1).jpg1125x2001 544 KB

GOOGLE CHROME MOBILE

IMG_7221.jpg1125x2001 369 KB

#3

FOOTER is fixed at 80px

Webflow_-_Healthy_Forest_Facts_and_Webflow_Forums_and_Zillow__Real_Estate__Apartments__Mortgages___Home_Values.jpg2920x2156 861 KB

100VH container

Webflow_-_Healthy_Forest_Facts_and_Healthy_Forest_Facts.jpg2536x2012 527 KB

#4

I am not the only one seems like....

#5

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

#6

here's the site!

http://healthyforestfacts.org/

#7

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

#8

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;
	}
}
#9

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

IMG_7223.jpg1125x2001 299 KB

SAFARI MOBILE
once you scroll a down.

IMG_7222.jpg1125x2001 424 KB

#10

Can you share your read-only link?

#11

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

#12

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

#13

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