The web content it's outside the viewport although we used 100vh (the red opacity box with 100vh text).
.section {
height: 100vh; // bad ...
For further actions, you may consider blocking this person and/or reporting abuse
thanks this is pretty easy. It's important to mention you'll want to run this on window resize events if you intend to allow your users to resize
My approach is to disable the show/hide of the safari bars by preventing the body from scrolling. That way the content area height is constant.
Hi, It will work, but you have to remember about for example scrollTo and #anchors in this solution.
nice! thanks for posting, this is the most effective solve I've found.
something thing I noticed after implementing this solution is that it can trigger the fabled 'jumpy scroll', referenced in the stack overflow post I'm sure we all landed on before finding this post. stackoverflow.com/questions/371122...
as a workaround I created two css variables, one for the fixed "starting" height, and another "dynamic" height that is only used for the shopping cart, mobile menu and other fixed-position elements that require 100% screen height.
pasted below in case someone else runs into the same issue!
// set up css var for starting app height. this will not change on resize so we can avoid the jumpy scroll issue
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height',
${window.innerHeight/10}rem
)};
window.addEventListener('orientationchange', appHeight);
appHeight();
// set up css var for dynamic app height. this is just for the cart and mobile menu since they need to be fixed to size at all times.
const dynamicAppHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--dynamic-app-height',
${window.innerHeight/10}rem
)};
window.addEventListener('resize', dynamicAppHeight);
dynamicAppHeight();
Hi,
see: dev.to/admitkard/mobile-issue-with...
Same issue, but again - on current Safari it is NOT working! Even on Android devices, I see the same issue.
So is there a working solution if the address bar moves away (no resize/switch to landscape etc.).
I’m confused 🤣
So what are you saying? That the JS solution in this thread doesn’t work but the one you linked does?
Hi could you please also illustrate the problem? thanks!
Hi clivend,
Yes, sure I will illustrate the problem today/tomorrow. Thanks for letting me know what is missing!
This majorly helped with a college project of mine, thank you for writing this!
Actually, it's not only on safari. I had the exact same problem on chrome / brave and used the first solution for one of my latest projects ;)
Hi ips-coding-challenge,
yes, you are right, I missed issue with OnePlus what I had last year. 🙏
[resolved]
But how to set for only one page? This solution applies to all pages.
Thanks again.
Gavin.
感谢,已解决