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
I am not the only one seems like…
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
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
Can you show me how you added the code? (screenshot)
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
