In July I built an iPhone web-app using jQTouch. On iOS 4 I had no problems with the web-app: The built-in jQTouch animations (slide left, slide right) etc were smooth as silk.
However, since the upgrade to iOS 5, these core page transition animations (slide left, slide right and flip) have become very jerky.
The web app can be found here (please add it to your home screen on your iOS 5 iPhone):
To see the effect, once it's added to your home screen, start the app and keep tapping the main buttons - Speed, Distance or Time.
I've done a lot of Googling and have found nothing, though I'm sure that other developers must have been / will be affected by this issue.
The issue is not just limited to my 3GS device as I have tried it on other people's devices (including iPhone 4) and I see the same issue, but only on iOS 5.
Stuff I have tried:
updating my jquery.js to different versions - including the latest - animations still jerky
updating jQTouch to the latest version - animations still jerky
stripping out all JavaScript, only leaving jQTouch and its initialization - animations still jerky
removing all of my custom css, only leaving the default jQTouch CSS - animations still jerky
removing all CSS, apart from just the CSS3 animations in jqtouch.css - animations still jerky
removing html elements - i noticed that when i removed all of the select and input elements from the web app, the animations became smooth again. However, there is nothing strange about the mark-up or CSS attached to these elements. Could this issue simply be to do with having too many elements on the page at once during an animation?
So it seems this issue is to do with HTML elements rather than JS or CSS, although I really can't figure out why...the mark-up is all valid apart from the iphone specific attributes i've used such as placeholder and autocapitalize etc.
Strange thing is that the animations on the jQTouch demo still seem smooth on iOS 5.
Any help/suggestions much appreciated.
Thanks!
Edit: Also, the button on the 'Info' page that 'bounces' has become jerky too. This uses the jQuery UI bounce effect. This was animation completely smooth on iOS 4.
Related
With some bootstrap 3.2 integration I have been making a horizontal scrolling site with 100% height and width divs to represent "pages".
It has been functioning correctly on various devices throughout development but when I went to use it in mobile-safari after ios 8 update the site is now displaying incorrectly...FFS
For the time being you can see the development site here:
(site is no longer active)
I'm pretty much convinced it is related to the audio/music player section. It's an old music player that has been restyled for the new site. The plan is for the site to go live with this player and then we'll be working on updating it after that.
To see how the site 'should' look you can view it in chrome on iphone (or on android of course).
It works fine in resized desktop browsers - it is literally just the ios 8 mobile-safari update that seems to have a bug.
For all I know they may update and it will fix itself, but I can't really just rely on that.
The navigation should be 100% of the viewport not 100% of the entire document.
There should be an audio player fixed at the bottom of the viewport.
I've tried a few things like stacking the divs vertically and while that helped with the navigation width issue it caused the audio player element then became contained within the parent 'music' container - I set the music container to overflow:scroll and -webkit-overflow-scrolling:touch as with the other sections but the audio player controls stopped being fixed...? It also stopped it working in chrome for ios which means it really isn't a viable option.
(Please excuse the messy css if you do take a look. The feel of the music section was revised partway through and I'm waiting until the end of development to clean it up.)
As far as I can tell this is not something that has been asked yet - I've searched for a few hours but I think the case is probably quite unique (horizontal full page layouts with bespoke audio players are pretty uncommon as far as I know)
Any help will be much appreciated
I've run into a problem with Bootstrap's .top-nav only on Safari for iPhone. When scrolling through a .dropdown-menu, after releasing my finger from the phone, it seems to "keep" or "catch" the location my finger was and hover over that list-item, keeping the CSS style for that element's :hover. It doesn't attempt to direct the url anywhere, but it can be a little confusing to the end-user.
This does not happen on my Android phone or in the desktop browser at extra small width (no-touch).
I understand this could be a difficult question to answer, but I'm hoping somebody else has run into this problem on their own and knows the root cause / a fix.
Bootstrap 3, latest version of Safari for iPhone 5. Thank you!
edit: oh, also, this is Bootstrap integrated into Adobe Business Catalyst. I don't think that should make a difference, but it might be worth saying.
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
Using jQuery mobile panel animations with PhoneGap, on the iPhone, the animation appears to happen in sections. Either the top half moves first and then the second half, or items with text move at a different time to everything else. Works fine on Android.
Anyone come across this before?
Thanks
We resolved this by using xCode to build the iPhone version rather than using PhoneGap. Looks like a PhoneGap issue.
I'm porting one of my projects to iPhone 4.
It's a Sencha Touch application, running via PhoneGap wrapper (that means UIWebView). Everything runs rather smoothly on iPhone 3(GS) and the simulator ofc. But on iPhone 4 (we've tested on several phones) the css rule for panel background makes the whole app run very slow including scrolling and tab transitions:
background-image: url(../images/background/main_panel__background.png); /*320x317*/
That causes all the stutter and lags.
I've tried to convert the image to JPEG and replace it - still nothing helps.
What could it be? I know that WebKit rendering engine does some scaling (1x1 -> 2x2) to accomodate for high resolution of "Retina" displays, but why would it cause such slowdown?
Thank you.
I discovered the same issue with background image and i am not sure what could be the reason. Actually i suspected the Alpha of my png to cause the issue, but apparently you had it with jpg too... For now i remove the picture. We could use CSS to remove it only for iPhones...