I'm developing a web site based on the Hyde theme for Jekyll.
This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.
In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:
(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)
This video shows the problem in action.
Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?
its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
What you can try for your website is the following:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 18rem;
text-align: left;
height: 100vh;
}
This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.
Add the below styles to fix the issue
html,body{
-webkit-overflow-scrolling: touch;
}
Here you find the reference
Related
I have div with the id #sy-whatshelp for a floating chat head which has the property Position:fixed as I want it fixed on the bottom right corner of the viewport. The css for the div is
#sy-whatshelp {
right: 15px;
bottom: 15px;
position: fixed;
z-index: 9999;
}
The issue is that in chrome mobile browser when scrolling down very fast, the touch area of the div shifts up even though visually the div stays in the correct position as defined by my css. How do I make the touch area of the div stick to the correct place too as defined by my css.
Here is a video link of the problem in chrome mobile dubugger connected to a pc using adb. You can see that the highlighted portion identifying the div goes up while scrolling down but visually its in the correct place.
https://imgur.com/a/yJBUMdR
I have tried this solution with no avail
Position fixed on chrome mobile causing element to move on scroll up/down
I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.
Here is my website if you don't understand https://www.hytalefrance.net
I've tried something like this:
overscroll-behavior: none;
But It change nothing
body {
height: 100%;
overflow: auto;
}
Do nothing to
It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
I would like the whitespace on mobile disappears.
Some screenshot taken on my mobile (iPhone 6)
I'm actually scrolling down:
When nav is open:
When I scroll with nav open:
I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.
There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?
Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.
I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious
I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
I'm working on this page: http://jsfiddle.net/Saturnix/4RzyG/embedded/result/
code is here: http://jsfiddle.net/Saturnix/4RzyG/
It works fine in Safari/Firefox/Chrome and other decent browsers. However, when opening it with Safari Mobile and pinching (zomming in) something strange happens.
As you can see, text fades away at the bottom of the page: this is done thanks to a png image with transparency applied at the bottom of the central div. They are both made to occupy the same space and handle window resizing but not Safari Mobile zooming.
This makes sense if you read the code: the bottom gradient (the png image) uses position: fixed to stay always at the center of the page but, as soon as you "pinch in" with Safari Mobile, it will always remains in the center.
I'd like the position to be fixed only for the height of the element (otherwise when scrolling the png image will detach from the bottom) but not for the width. Is this possible? How would you change the code to make it work on iOs?
This is the css code which control the text fade out by placing the png image
.bottom_fade_center {
position: fixed;
bottom: 0;
width: 80%;
left: 10%;
background: url("bottom-fade.png");
background-repeat:repeat-x;
height: 400px;
pointer-events:none;
z-index: 3;
}
Thanks in advance!
I am having trouble with a full page background in a test wordpress site. I can't get the page scroll bar to appear.
Any help would be appreciated.
[EDIT]
The issue is you added the following to your body tag.
position: fixed;
Remove that line and everything should work then.
That is probably because there is no need for a scrollbar because the page doesn't extend the full height of your screen resolution.
I just figured this out myself:
I changed this for the background image:
position: absolute;
to
position: fixed;
and deleted
overflow: hidden;
This allows the scroll bar to appear and the fixed background position makes the background stay in place. The background still re-sizes perfectly, this just lets your content scroll.
Then add the following to do away with the horizontal scroll that appears:
overflow-x: hidden; /*Horizontal scrollbar*/
-ms-overflow-x: hidden; /*IE 8 horizontal scrollbar*/