When using JQuery-mobile with phonegap on iOS, I had a panel open, but then the horizontal scrolling is enabled, causing trouble for me, so I can scroll entire page together with panel to the left. how to disable horizontal scrolling when panel is open?
I just came across the same problem with phonegap and android.
What fixed it for me was getting rid of data-display="overlay" or display="push". Even though it doesn't slide in anymore the menu still works.
Hope this can help.
With jQuery Mobile 1.4.5, the version with which I encountered this issue, the cause is that the html element allows horizontal scrolling. This can be fixed by setting either
html { overflow-x: hidden; }
or
.ui-mobile { overflow-x: hidden }
Related
This question requires some explaining, so please bear with me.
Contrary to popular belief, inertia scrolling (the very smooth 60fps scrolling) is not enabled on web pages in Mobile Safari by default. As it makes a world of difference in user experience, I have enabled it by dynamically applying this CSS to the HTML and BODY element of the page, after a Modernizr test for iOS specifically:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
The above basically makes the body element a scrollable element and by means of -webkit-overflow-scrolling: touch, one gets the smooth intertia scrolling effect on the entire page. Some more background on this solution can be found here (disclaimer: article by myself).
It works, so far, so good. The problem is that this solution effectively disables another highly desired behavior of Mobile Safari: normally, when scrolling down, it will make the address bar smaller, and hide the bottom bar of the browser entirely. They re-appear when scrolling back up.
Unfortunately, the above technique disables this for some reason. Yes, we've got super smooth scrolling, yet the browser bar is always large and the bottom bar permanently stays visible, both taking up valuable space.
My question therefore is, can I have both? I want the super smooth scrolling on the entire page, yet I also want the default hiding behavior of browser elements when scrolling.
An example of a site where I am using this is here:
http://www.jungledragon.com/
If you open that in Mobile Safari, you will see the smooth scrolling, yet not the hiding of browser elements when scrolling down.
I think you're setting both the <html> and the <body> element to scroll. You should apply these CSS rules to 1 element you want to be able to scroll.
So either the html or body, not both.
I'm using fancybox, and it seems that many people who use it disable zooming of any kind on mobile devices. The problem is that when I have a fancybox open, completely zoom in while the fancy box is open, completely zoom out, and then close fancybox. When I scroll the body, depending on the direction of the scroll, there is a lag where a top section or bottom section is chopped off, and then revealed after a split second delay.
I found out that removing the position fixed style from the overlay removes the issue. I also saw that on caniuse.com that fixed positioning only has 6% support, including iOS 7.
Are there any workarounds that can fix this issue with fancybox? Thanks.
edit
I found this other SO question, that might help for reference: CSS "position: fixed;" on iPad/iPhone?
On your div put:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
When you scroll on a web page in iOS 7s Safari the URL bar shrinks and the bottom navigation bar disappears. In the site I am working on these two things to not happen.
The momentum/inertial scrolling was not working as well until I added -webkit-overflow-scrolling: touch; to the html element.
I can't imagine what element I have added to the code to have it lock up Mobile Safari like this.
Hoping this isn't a repeat question, it's hard to know what to call this besides "shrinking/hiding".
I accidentally stumbled upon the solution last night in an article by Maximiliano Firtman's article Breaking the Mobile Web. The article points out many issues with the new Mobile Safari in iOS 7.
The solution to my problem was close to his answer (his being if there is overflow: scroll; on your page it will not trigger the auto UI hide feature) mine was an overflow: hidden; style.
How can I make the side panel content scrollable in case there are many items, without scrolling the content on the main page (in JQM 1.3 Beta)? I am trying to implement this for an application running on both Desktop and Mobile browsers.Have looked everywhere, but cannot find the answer.
I've made a div inside the panel that is scrollable, but this doesn't work on iOS4 and below without 2-finger scrolling (div within div issue in iOS).
Please, visit the following to find the answer to the above question:
JQM 1.3 panel + iscrollview + dynamically loaded
http://forum.jquery.com/topic/jqm-1-3-panel-iscrollview-dynamically-loaded-pages
jquery-mobile-iscrollview
https://github.com/watusi/jquery-mobile-iscrollview
.ui-panel-inner .ui-content myElement {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
You can make the selector more specific to a given element or just leave the "ui-panel-inner" if you want the whole side panel to be scrollable.
Note: The "-webkit-overflow-scrolling: touch" adds native inertia scrolling to the overflow and is not needed if all you want is scroll functionality. This should work on webkit browsers; mobile safari and chrome. But I have only tested it on mobile safari. It will not work on mobile IE but again, I have not tested it.
I'm building a mobile app for IOS, with html5. I'm using "-webkit-overflow-scrolling: touch" to get the native inertia scrolling, but it's very buggy. I've solved the issues with content not rendering until the scrolling stops, but one persistent bug is this:
When I try to scroll up and down, nothing happens, but when I try to scroll horizontally, the content scrolls vertically (90 degrees off axis). If I navigate around my app and come back to the page, it will sometimes be fixed. Also, sometimes it won't scroll at all, despite being full of content.
From what I've googled, the consensus seems to be that Apple is aware of this bug, and has no intention of fixing it any time soon. Has anyone found a solution to get -webkit-overflow-scrolling to work correctly?
I also have struggled with this bug for months. The best characterization that I've found is:
https://bugs.webkit.org/show_bug.cgi?id=87391
which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.
I encountered the same problem: a node using -webkit-overflow-scrolling: scroll that would intermittently scroll up/down only with a left/right scroll gesture.
Here's what I found to be possible causes:
iframe present on the page anywhere, visible or otherwise (source)
visibility: hidden applied to any parent of the scrollable node (source)
However, none of these situations were present in my web app. I had a scrollable <ul> inside of a pure CSS modal dialog that I wrote which used a clever trick to add a transparent underlay -- an ::after pseudo-element with position: fixed.
When I removed the position: fixed from the pseudo-element, the problem went away! Of course, this made my clever trick useless, but it was interesting to learn that this bug could be triggered by this situation.
Device: iOS 5.1.1 on 2012 iPad 3 (retina)
Offending code:
/* Underlay */
.dialog::after {
z-index: -1;
position: fixed; /* <--- This was the problem! */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
content: "";
}
tl;dr: if containing elements have a fixed position pseudo-element, removing it could fix your scrolling problem.
I know that the issue is kind of old, but I had to make my website work on iOS 5. Unfortunately i couldn't remove nor replace the iframe. I've noticed that the presence of iframe caused the problem only if it was rendered before the element which was ment to scroll smoothly. Appending iframe to the document later (after the element with -webkit-overflow-scrolling: touch) fixed the problem :)