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.
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
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.
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'm using jqTouch inside a UIWebView of my native iPhone application and many of the pages have very weird "tap-jump" issues.
About 75% of the time that I access a page if I scroll down a bit, and just tap anywhere on the screen, it jumps to the top of the page. If I open that same page in the iPhone Safari browser, it works great every time and no "tap-jump" issue. So it appears to be an issue ONLY within the UIWebView.
I've been spending hours and hours trying different things to figure out why this is happening and I welcome any ideas.
Thanks,
John
It is expected behavior for jQTouch to scrollTo(0,0) on slide left/right navigation. Of course, this will only create a noticeable effect if you tap a link while the page is scrolled (i.e., if the page isn't scrolled, it can't jump).
I don't know why you'd see a difference between UIWebView and Mobile Safari, unless perhaps the UIWebView is shorter than Mobile Safari, which could create the possibility of scrolling in the UIWebView that doesn't exist in Mobile Safari.
My suggestions are:
Make sure you have the latest version of jQTouch (https://github.com/senchalabs/jQTouch)
Make sure you are doing exactly the same testing in UIWebView as you are in Mobile Safari (i.e., if you scroll down prior to tapping in one, do the same in the other).
HTH,
j
I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.
But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.
I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?
EDIT:
I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.
Original answer:
That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.
I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.
For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.
Hope this makes sense, if not let me know.
FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.
I'm sure this is a bug... will respond if/when I figure out a fix.