I have a panel with a scrollable content. It works fine in every browser & device except for iPad (no matter what browser I use on the iPad).
I have a panel-container and a panel-slide
.panel-container {
position: relative;
width:100%;
height:100%;
z-index:1;
}
.panel-slide {
width:90%;
height: 90%;
display:block;
position: absolute;
z-index: 2;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
}
The panel-slide contains a lot of content, so I get the scroll bar. However I can't scroll on iPad.
I have googled the problem and have tried the -webkit-overflow-scrolling: touch, but I can't seem to get to the bottom of it.
What is there to do?
I don't know if this will be helpful, but I had a similar issue, and this is how I resolved it.
My issue:
My page has a popup element that gets populated by AJAX with a list of clickable links. When this element is pre-populated with the rest of the page (some pages required the list to be visible from initial page load), it worked fine. But, when I opened the element and populated the list, as mentioned above, using AJAX, the list would not scroll on iOS.
The problem, as far as I could tell:
In the interim between clicking the button to open the list and when the server responded with the populated list, I had the element show some simple text saying "Loading...". I found that when this was removed, and the element was already populated from the page load, it would work fine. It seemed that as long as there were already contents in the list with a height greater than the containing element, it would be scroll-able when the list populated.
My resolution:
What I did was to take the simple text in the interim from "Loading..." and to wrap it in a div that would prompt scrolling, like such: "<div style='height:1000px;'>Loading...</div>", and that seemed to work for me.
Again, I hope that this can help someone, or if not then perhaps someone with a little more skill than myself may be able to tell us why this might have worked.
There are no scrollbars in any of the iPhone OS. Use 2 fingers to scroll. They use gestures and not mouse scrolls so you are unable to achieve this without hacks.
It maybe worth looking at http://iscrolljs.com/
Related
Ok, so I am working on a javascript application. One feature is a help page for the application. The way I am trying to do it is to have a button that opens the help page - .html - in an iframe contained within a container div.
This works just fine, but I run into the well-known issue of iframes not scrolling in iOS(i.e. on iPads and iPhones).
There is a common fix for this, which involves setting overflow rules in the css for the container div.
So the initial CSS is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
}
#iframeContainer iframe {
{
width:100%;
height: 600px;
}
and the css with the iOS fix is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
height: 600px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
#iframeContainer iframe {
{
width:100%;
height: 12000px;
}
The overflow rules are added to the css for the container, but in order to work, you have to set a height on the container. You also have to adjust the height of the iframe itself. If I leave it at its initial 600px, it never overflows the container div and there is no scrolling. If I don't set any height at all on the iframe, it hardly shows anything at all. So I have to set the iframe's height to contain all of the contents of the HTML file, which comes to 12000px.
All of this works, and the scrolling issue on iOS is fixed. But here's where I run into the issue in question.
The HTML page being loaded into the iframe has within it a bunch of anchor links that link to other places on the same page. After applying the iOS fix, those anchor links no longer work at all. Nothing happens when they're clicked.
I am reasonably sure that the reason is because when I set the iframe's height to 12000px, the HTML page behaves as though it is all displayed on one page, in which event, nothing happening is the appropriate behavior for anchor links.
So I think understand what is going on, and I'm just wondering if anyone has any ideas on how to make the anchor links work while keeping the iOS fix in tact. If I decrease the iframe's height to make the anchor links work, then less and less of the HTML page will show up within the iframe. If I remove the iOS fix all together, the anchor links will work but the scrolling won't work on iOS.
Open to anything. For the time being, I've abandoned the idea and the 'Help' button just opens the HTML page in a new tab/window.
I have an app / site where I'm using -webkit-overflow-scrolling: touch; to make the scrolling smooth on iOS.
However, recently it started causing my navbar disappear upon initial load (using iOS) and it only appears when certain elements were scrolled up or down, it makes the navbar completely unusable.
If I comment out the -webkit-overflow-scrolling: touch; then it works perfectly but the momentum scrolling is gone. I've tried adding a z-index hack to the navbar to make sure it's loading on top of everything, I've added a few different display properties as well to see if I could hack the -webkit-overflow-scrolling: touch;, I've even tried adding the items into memory using -webkit-transform: translate3d(0,0,0);, and nothing is working. The navbar still disappears / glitches out no matter what when -webkit-overflow-scrolling: touch; is included.
Has anyone had this glitch before and figured it out? I really don't want to load an entire JS library just to handle my scrolling, but I might have to if I can't figure this glitch out. The non-momentum scrolling feels so clunky and unusable.
I had the same problem. I had a list of items with -webkit-transform: translate3d(0,0,0); that were not showing as soon as I enabled -webkit-overflow-scrolling: touch;. My problem was that I had the elements with -webkit-transform: translate3d(0,0,0); nested inside another div.
In other words, there was a div in between the one with the overflow-scrolling: touch and the children with the translate3d. Didn't realize they had to be direct children.
Once I consolidated my divs directly it stopped hiding the elements and worked perfectly. Hope it helps.
I had the same problem. In my case I was trying to use ::before to display an overlay. I worked on Chrome, but not in Safari/iPhone. I end up not using it in the end, I replace it with ::after
I'm trying to get momentum scrolling to work, by setting a class called momentum-scrolling on a top level div that wraps the part of the content that scrolls. The class is defined as:
.momentum-scrolling
{
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Yet it is not working (testing in simulator on both iOS 7.1 and 8.1).
Here is a link to view the example on jsbin directly (suitable for viewing in a mobile device for testing):
http://jsbin.com/cewobokisi/1/
Here's the link to the editable stuff on jsbin:
http://jsbin.com/cewobokisi/1/edit?html,css,output
(Note that the CSS shown includes minified bootstrap, and a few other things. I left this like this because while it's a bit harder to edit, I was trying to reproduce the issue exactly as we have it in our site now, in case anything we're doing is causing the issue.)
Update
I've got a modified version here (http://jsbin.com/sibofucexe/1) where I've modified the .momentum-scrolling style to include position: fixed, height/width 100% (based on some other posts I found with momentum scrolling examples):
.momentum-scrolling
{
position: fixed;
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
And that does now allow for inertial/momentum scrolling to work!
However, now I lose the ability to tap on the top bar to scroll the window to the top, and occasionally I cannot scroll up or down (typically when the DOM is being manipulated by JavaScript, due to an ajax hit to add more data).
Any ideas on these issues? Am I doing this wrong?
I know this is a late reply, but for the sake of future Googlers:
According to CSS Tricks, you must use overflow: scroll rather than overflow: auto. That may cause your first example to work.
I'm using Bootstrap 3 and I have a long form that users will need to scroll to get to all of the fields. What is happening is if you touch an input field to start your scroll it just locks up. This doesn't happen on android phones.
I can't give you a link to my exact code, but if you go here and click the first demo on iphone you'll see what's happening: http://jschr.github.io/bootstrap-modal/
I'm not sure if there's some way to give those input fields some sore of touch event that allows the scroll or what. Any input would be helpful.
Also, the iphone simulator in xcode shows the same thing.
I fixed a very similar issue where the occasionally on iPhone, the background scrolls rather than the modal. Try disabling webkit smooth scrolling on the modal, and disabling all scrolling on the body when a modal is open
body.modal-open {
position: fixed;
overflow: hidden;
left:0;
right:0;
}
.modal{
-webkit-overflow-scrolling: auto;
}
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!