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
Related
The question is simple I've tried several different techniques like re-ordering scripts being called in the DOM, removed 100% height from the body and html element in my css; but none of it worked.
My site won't scroll down the page on iPhone or iPad and I can't seem to figure out why. It will scroll a few hundred pixels down the page and then freezes.
I've run an audit in chrome and tightened up as much as I could but, i've checked the timeline but don't see any resources hogging the bandwidth that might cause the page to just freeze like this.
Here is the public facing link (sandbox) I have going on.
https://cloud.spinsys.com/sky/marketing-v3/index.html
Obviously to reproduce the error you'll have to view on an iPad or iPhone or any tablet that you might try it on to see if it works on those.
Has anyone encountered an issue with their site not scrolling on an iPad or iPhone?
It is a responsive site and it's of major importance that I get this fixed.
Any advice, help, suggestions would be most helpful, thanks to the S.O. community upfront.
The problem was the skrollr.js library. I have removed it and the page scrolls fine on iPad and iPhone.
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.
I have a problem that I've been working on for the past 10 hours (going crazy).
I've been working on a revised version of Walma - which is a collaborative white board written for node.js. I have placed a div header above the whiteboard, and a content area and footer div below it.
This works perfectly on my pc, however when I try to run it on my iPhone I can not scroll down the page to view content. It's like there is no permission to do this- I can not scroll or zoom or anything apart from draw on the canvas.
Notes: I have made the canvas only take up 60% of the iphone screen so that I am able to scroll (as apposed to draw). But this doesn't work.
I have removed the meta tags that you see in the demo.
I have changed the css multiple times with no success.
Is there something I'm over looking? Is there some javascript that's preventing iphone from scrolling that I haven't noticed? I would be incredibly thankful if anyone could point me in the right direction.
Git (demo is linked in the description top) : https://github.com/opinsys/walma
My adaptation : https://dl.dropboxusercontent.com/u/91956067/walma.tar.gz
Many Many thanks,
Joel.
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.