I have a one page scrolling site width smooth scrolling links. Fixed position nav with links to anchors. Pretty straight forward.
Everything works fine on desktop browsers, but on the iPad (iOS 5 Mobile Safari) links work fine initially, but efter the page gets scrolled (by top nav links), all links including top nav links "get blocked" and can't be clicked. I have to adjust the viewport vertical scroll, then the links works again.
Thankful for any help!
Using this scrolling function:
$('nav ul a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $( $anchor.attr('href')).offset().top - 60
}, 1200,'easeInOutExpo');
event.preventDefault();
});
The same Problem is described here: anchor links not working properly on ipad
Found the solution here: https://stackoverflow.com/a/9198836/1145706
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called
Related
So here's my predicament.
In mobile safari, overflow:hidden; doesn't work as it does on desktop. On desktop, adding this to the body disables scrolling in the browser, but then you can still scroll inside another div, say a drawer or a lightbox.
On mobile safari, you can still scroll the page with a touch and drag with your finger.
I came across a possible solution:
document.ontouchmove = function(event){
event.preventDefault();
}
However, this disables scrolling altogether. Even in a drawer or lightbox div where I need to still allow scrolling.
I also came across another "fix" where people add position:fixed; to the body. This doesn't work in my scenario because the user could already be halfway down the page when they open a drawer/lightbox. This method would put the body in a fixed position, thus losing their scroll position of the body.
How can I disable any movement/scrolling of the body on mobile safari, but still allow scrolling in a drawer/lightbox?
OS: iOS 8.1.1
Browser: Safari
Phone: iPhone 5C
We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.
The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)
Note: This behavior is observed in iOS 8 only.
This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:
html, body{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.
For anyone else coming across this, the fix I ended up using was
window.addEventListener("resize", function(){
onResize();
});
function onResize(){
document.querySelector("html").style.height = window.innerHeight + "px"
};
onResize();
this seems to work in the latest version of twitter's browser on safari.
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.
I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.
How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?
If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.
EDIT:
I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.
In the end I've been able to solve the problem by using this snipped of code:
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
$('iframe').wrap(function() {
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
}
The code above was found here: http://home.jejaju.com/play/iframe-scroll.html
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.