I am facing an issue with bootstrap 3 modal in iOS. Is there any working solution to prevent background scroll in iPhone, However it's working perfect on android but in iPhone whenever I open a modal and try to scroll background scroll works with a modal scroll as well.
I have tried all the possible solutions position: fixed not working. overflow: hidden is already applied. Thanks
This is the default style on the modal.
.modal-open {
overflow: hidden; }
Related
I am working on an ionic project. I have a page with css looks like the code bellow.
my page contain a button that opens a modal popup, when I close that model the page freezes and stops scrolling.
When I change -webkit-overflow-scrolling to "auto" the issue goes a way, but the scroll becomes hard and not smooth.
So I am looking for a solution that keeps "-webkit-overflow-scrolling: touch" and enable scrolling in my page after closing the modal!
Would you please help?
--CSS :
my-page{
.mypage-content{
height: 100%;
width:100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
............
}
}
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
For a bootstrap modal. Is there a way to achieve both:
Avoid the background content behind the modal from being scrollable
When opening the modal, the background content should not shift to the right because of removed scrollbars
The best solution I have so far is:
.modal-open {
overflow-y: scroll !important;
}
But it has the problem that the background content is still scrollable when the modal is showing.
body.modal-open {
overflow: hidden;
}
This works for me without any shift.
How to show a modal without shifting the content to the left?
That bug is fixed in the upcoming Bootstrap v3.2.0 thanks to
https://github.com/twbs/bootstrap/pull/13103
I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
Scrollbar in boxes with both overflow auto and pointer-events none are not responsive to clicks in firefox.
I have created a very basic jsfiddle reproducing the bug:
http://jsfiddle.net/PgaeC/2/
.out {
overflow: auto;
pointer-events: none;
height: 100px;
}
.in {
height: 200px;
}
this works in chrome and internet explorer (tested with ie9 and ie10)
in firefox the scrollbar is unresponsive and cannot be clicked at all.
any idea how to give clicks back to the scrollbar in firefox ?
What i want is a box handling click, and another box sometimes going over it, grabbing clicks on its own, with a space on top where you can still interact with the bottom box, and the scrollbar spanning on the whole page
like this : http://jsfiddle.net/NczQG/2/
EDIT: created bug in mozilla bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=880671
(as seen in https://bugzilla.mozilla.org/show_bug.cgi?id=880671)
the mozilla team fixed it :
http://hg.mozilla.org/mozilla-central/rev/f8bf18dceb1c
so it's fixed on the nightly.