I am having troubles with scrolling on my website on an iPhone.
What I mean by that is that normally, when you start scrolling and then release the display, the site will keep scrolling for a bit on an iPhone. But with this site, it doesn't. As soon as you remove your finger from the display, it will stop scrolling. It is as if the scrolling is sticky.
I really have no idea where I should even begin to look to debug the problem, which is why I am not posting the code (I'd have to post the complete website).
The issue is also not showing up on my Nexus 5. I have had the issue on two different iPhone 5.
I am basically looking for points to start to debug the problem right now.
Apply this script on the master page means if you have a Common layout page :
$(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iPad|iPhone|iPod)/i);
if (agentID) {
$('body').css('-webkit-overflow-scrolling', 'touch');
}
});
Related
I have a coverflow type image gallery that I have created for mobile picture viewing. The first iteration lives here: http://codepen.io/jasonmerino/pen/Fsloq.
I've wired up the touch events and all seems to be going well for mobile Safari on iPhone and iPad, but when I go to view it on Chrome for iPhone or iPad the images disappear during part of the CSS translate3d which moves the images to the sides.
I have added -webkit-backface-visibility: hidden; to all of the markup that comprises the swiper, which does not fix this disappearing act my images are doing.
What am I missing here? Any help would be appreciated. Thanks!
The problem was with the peice of code where I was removing inlined CSS translate3d. The code that I had in place dealt with removing the translate by just re-assigning the background images.
for (var i = 0; i < images.length; i++) {
$el.images.eq(i).css('style', 'background-image: url(' + images[i].src + ')');
}
In mobile Safari this was fine, but in Chrome the images reloaded when I re-assigned the background image, hence the disappearing act. So I adjusted my code to be a little smarter, and concise, so that I only removed the translate from the inlined styles.
$el.images.css('transform', '');
Turns out that when you pass an empty string as the value to a CSS attribute in jQuery they just remove the style out for you instead of leaving it there but blank. Makes sense, but I never knew that before.
Anyway, that's what fixed it for me.
I have been trying for days to get the background image on my JQM iPhone app to remain fixed and to have the content scroll above it.
Having research many of the answers given I have the following piece of code:
body {
background-image:url(images/background.jpg);
background-attachment:fixed;
}
Using this achieves the desired effect when previewing the app in Safari on my desktop however when I view the app on my iPhone(4s - 6.1.3) the background scrolls with the content.
I have tried many different methods to achieve what I require but so far I have not been successful. As the majority of apps use this method I am sure it is something very simple which I am missing.
Any advice would be gratefully received. Thanks.
Try to use the below one
body {
background-image:url(images/background.jpg);
background-attachment:fixed;
background-size:100%;
}
I'm having trouble with a UIWebView on both the iPhone and the iPad.
The page that I'm loading is generated by the app which uses the javascript syntax highlighter library ( http://alexgorbatchev.com/SyntaxHighlighter/ ) to syntax highlight the text that is loaded.
This works great, and it looks fine, however when I come to scrolling the webview I have problems. Horizontal scrolling is fine when you slide it, but when you let go it doesn't continue to scroll, so it seems like the inertial scrolling is not working?
Scrolling down on the other hand is completely different. When I can get it to scroll, the inertial part is working fine, but getting it to scroll is a bit harder. If you don't scroll down perfectly straight then it simply won't scroll down. If you do manage to get it straight, then you also seem to have to press and hold for half a second or so before you start scrolling, otherwise it simply won't scroll.
I'm getting really frustrated with it as I cannot find out what is going wrong!
Any help?
EDIT :
After more playing around, it seems that it is based on the HTML content, but I can't figure out what is causing it to mess up. If I load the content and don't run the syntax highlighter javascript function, then it loads fine, and scrolls without any problems and all is well. The moment I run the syntax highlighter I get the issues. The source that is produced by the syntax highlighter is here ( http://pastebin.com/c6Mnc9nb )
I know it looks horrible but it should be fine, and renders correctly. But as I say, that HTML causes the scrolling issues and I can't figure out why.
PLEASE can someone help! I really need this sorted so I can get my app published.
Doesn't matter. Just replaced the syntax highlighting library instead.
Im having trouble loading pdf's in a UIWebView when inside a Scrollview with paging enabled and just can't get my head around it.
So i started with the paging sample code available at apple developer, once done that i loaded instead of a Label in the ViewController a UIWebView that loads the Pdf. and it did worked but with a lot of bugs with rotation and scaling on the device.
On iOS 5 scaling is simply not working it zooms but scrolls to top and doesn't allow me to move inside the UIWebView so when I move the only thing i do is move between the pages not inside the UIWebView.
And with iOS 4 it does let me move but has tons of trouble when rotating the device, it doesn't refresh the UIWebView inside to the new frame (even though i do change the frame on didRotate method), so i was wondering if there is another method to load the PDFs that is not a UIWebView that is compatible with zooming and rotating with the UIScrollView with Paging.
Or is there something I should consider when loading the UIWebView inside the UIScrollView? a feature i have to enable or something i am missing?
Because at the beginning I thought it was a bug on iOS 5 and that i was doing something wrong when rotating (which probably i am anyway) but i have several apps on my iPad with ios 5 that do the same but have absolutely no trouble.
I hope you can point me in the right direction.
Thanks in advance!
You should really be using CATiledLayer and CGPDFDocument for this kind of stuff.
There is an example that I found just now : Olive Toast's Blog
Its time consuming to wrap your head around these concepts, but its well worth it. I created a webView+scrollview combo for a pdf reader, which had to be junked and rewritten with CATiledLayer.
Doing it using webview in scrollview gobbles up a lot of resources, ending in a very bad UX
Edit: Apparently there is another post that has a better answer than mine (you may find this link useful)
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.