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

GOOGLE CHROME MOBILE


#3

FOOTER is fixed at 80px

100VH container


#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

SAFARI MOBILE
once you scroll a down.


#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.