I'm working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling.
Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch which leaves the standard sticky scrolling. Please help!
Here is an example of one of the standard classes that works in iOS5, 6, and 7:
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
I had a similar problem with a (quite complex) nested scrollable div which scrolled fine in iOS 5, 6 and 7, but that intermittently failed to scroll in iOS 8.1.
The solution I found was to remove all the CSS that tricks the browser into using the GPU:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
By doing this, the '-webkit-overflow-scrolling: touch;' can still be included and still function as normal.
It did mean sacrificing the (for me, dubious) gains to scrolling performance that the above hacks gave in earlier incarnations of iOS, but in the choice between that and inertia scrolling, the inertia scrolling was deemed more important (and we don't support iOS 5 anymore).
I cannot at this stage say why this conflict exists; it may be that it is a bad implementation of these features, but I suspect there is something a bit deeper in the CSS that is causing it. I am currently trying to create a pared down HTML/CSS/JS configuration to demonstrate it, but maybe the heavy markup structure and the large amounts of dynamic data is necessary for it to happen.
Addendum: I did, however, have to point out to our client that if even with this fix the user starts trying to scroll on a non-scrollable element she will have to wait a second after stopping before being able to scroll the scrollable element. This is native behaviour.
I had this problem and found a solution. The solution is that, you have to put your content into two containers for ex:(.dashboardScroll > .dashboardScroll-inner) and give the inner container ".dashboardScroll-inner" 1px more height than the parent ".dashboardScroll" throug this css3 property
.dashboardScroll-inner { height: calc(100% + 1px);}
check out this :
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
or otherwise if you can't add another container use this:
.dashboardScroll:after { height: calc(100% + 1px);}
I had the same problem in a Cordova web app. For me, the problem was that I had a parent <div> that was animated and had the property animation-fill-mode: forwards;
Removing this property solved the problem and fixed the broken overflow-scrolling.
I was not able to solve the problem with previous answers. So after a few hours a gave the iScroll library a try, iScroll. I know including an extra library (and quite sizable) to add scrolling for just iOS is not great but this is what worked for me. Just follow the readme, the lite version suffices.
Disadvantages:
Scrolling on Android now looks like crap, it is not native anymore.
It is not possible to refresh the page by scrolling anymore
You need to apply another fix for Android : Clicks not working
I am unsure if I will use it, but if you are in need give it a go.
I tried every solutions here without success. I was able to make it work by having the property -webkit-overflow-scrolling: touch; on the scrollable div AND on the parent container.
div.container {
-webkit-overflow-scrolling: touch;
}
div.container > div.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
Preventing touch events from surrounding elements bubbling up the DOM is another potential solution, you may notice that scrolling stops when surrounding DIV elements receive the touch or drag events. We had this particular issue in a menu that needed to scroll smoothly. Turning off those events helped stop the "sticking" of the scroll able element.
$html.bind('touchmove', scrollLock );
var scrollLock = function(e) {
if( $body.hasClass('menu-open') ){
e.stopPropagation();
e.preventDefault();
}
};
$html.unbind('touchmove', scrollLock );
I've been having some trouble with it too but in a slightly different scenario.
I do have my divs with inertia without any problems.
I have a simple JSFiddle where you can have a look.
https://jsfiddle.net/SergioM/57f2da87/17/
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
}
Hope it helps.
I used the last method in mohammed Suleiman's answer (.dashboardScroll:after { height: calc(100% + 1px);}) but the result was that I had a 100% + 1px empty space below my content. I fixed this by changing height back to 1px after 500ms. Ugly, but it works.
This was a react.js app so my code was like this:
componentDidUpdate() {
if (window.navigator.standalone && /* test for iOS */) {
var self = this;
setTimeout(function(){
self.refs.style.innerHTML = "#content::after { height: 1px}";
}, 500);
}
}
and render:
render() {
var style = '';
if (window.navigator.standalone && /* test for iOS */) {
style = "#content::after { height: calc(100% + 1px)}";
}
return (<div>
<style type="text/css" ref="style">
{style}
</style>
<div id="content"></div>
</div>);
}
I had this problem while using the angular bootstrap modal. I fixed it by creating my own stylesheet and removing the fixed width and margin in the media queries.
ORIGINAL:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
#media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-sm {
width: 300px;
}
}
#media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
CHANGES:
.modal-dialog {
margin: 0px;
margin-top: 30px;
margin-left: 5%;
margin-right: 5%;
}
#media (min-width: 768px) {
.modal-dialog {
width: auto;
margin-left: 10%;
margin-right: 10%;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
#media (min-width: 992px) {
.modal-dialog {
width: auto;
margin-left: 15%;
margin-right: 15%;
}
}
i fixed my issue by adding some inline css to the scrollable div with jquery.. adding the css to the div after the dom is loaded makes scrolling work.
$('.lightbox__scrollable-content').css('overflow-y', 'scroll');
My problem was that the body had position:fixed that came from body-scroll-lock.js. Removed it and everything worked fine.
Related
I have a problem with my new website. I have a div used as a "button to the top of the page".
When i scroll down with the wheel mouse, the div appears BUT changes its position to the right (and a scrollbar appears). I have this problem only with ie 11...
Weird... or not, idon't know, I have been searching a few days now and i have found nothing.
My css:
#btn_up
{
display: block;
width: 100px;
height: 100px;
background-image: url(../img/pagetop.svg); background-repeat: no-repeat;
position: fixed;
bottom: 15px;
right: 25px;
z-index: 1000;
cursor: pointer;
display:none;
}
And my javascript:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#btn_up').fadeIn();
} else {
$('#btn_up').fadeOut();
}
});
$('#btn_up').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
What do i miss???
I've used your code to create a quick jsFiddle to reproduce the issue, but all seems to be OK in IE11/win7 as well as in FF and Chrome. Could you check your issue using my code, and maybe update the source if something is missing to see the issue?
I've replaced only this part:
background-image: url(../img/pagetop.svg); background-repeat: no-repeat;
with:
background-color:red;
Can you explain what you mean by saying 'div changes its position to the right'?
As far I can tell - div shows up on the right side of the page due to "right: 25px;" specified inside the "#btn_up" selector. I guess it's not your main issue, is it?
I often float images either left or right around text on desktop but I want them centered for small mobile devices and the paragraph to drop below the image using Responsive design. I've got the paragraph dropping below the image using an online mobile viewing device but not when I try to view it via my computer. The image won't center online or on my computer.
Here is what I have found after many hours of research:
I have this set up for all images:
img{
border:0;
max-width:100%;
height:auto;
}
I have this set up for all paragraphs: it pushes the paragraph down below a floated image when the width of the paragraph is less than 10em (about 200 px).
p:before{
content: "";
width: 10em;
display: block;
overflow: hidden;
}
I have applied the following for images to media queries less than 320 and max of 480:
img{
max-width:100%;
display:block!important;
margin:0 auto !important;
float:none !important;
}
(i had to add !important to some of them or they wouldn't take but it's still not accepting margin: 0 auto; )
Can anyone see what I'm doing wrong?
Here you have a working update of what you need: http://jsfiddle.net/ancpjmet/3/
I changed min-devide-width to min-width and max-devide-width to max-width to be able to see the changes on my desktop browser in Google Chrome.
You have to set the div wrapping the img to float: none;, not the img:
#media only screen and (min-width:320px) and (max-width:480px) {
#image-wrapper{
float: none !important;
}
#image-wrapper img{
max-width: 80%;
display: block;
margin: 0 auto;
}
}
I also rebuild your .clearfix class to be more consistant and work in all browsers:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Take a look at the changes in the jsfiddle given.
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I've this mixin applied on a menu, I don't want see on small resolution:
#mixin visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
This working fine. But on bigger resolution I will show this menu. Obviously I can restyle and revert these attributes (I'm allready done it). But I was thinking if is there some built-in way to remove mixins – something like #uninclude visuallyhidden;.
Or is there a better way how to do this?
Thanks for all suggestions.
Use media queries to only apply the styles when appropriate. Doing and undoing bloats your CSS unnecessarily.
#media (max-width: 45em) {
.foo {
#include visuallyhidden();
}
}
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.