100VH FLEX issue on safari mobile

Design help General
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

1125Ă—2001 544 KB

GOOGLE CHROME MOBILE

1125Ă—2001 369 KB

3

FOOTER is fixed at 80px

2920Ă—2156 861 KB

100VH container

2536Ă—2012 527 KB

4

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

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

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.

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

1125Ă—2001 299 KB

SAFARI MOBILE
once you scroll a down.

1125Ă—2001 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

1 Like
12

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

1 Like
13

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