I am in the process of making a responsive mobile website.
When testing on my phone, I noticed that I couldn't scroll vertically past something that could be scrolled horizontally.
Here is an example of what I mean (sorry you can't see the horizontal scroll on your phone but just trust me that it works).
Mobile Webkit browsers can't scroll past the table in this example:
http://jsfiddle.net/tArEy/
Then I commented out the following line to make the vertical scrolling work. However, this made the horizontal scrolling a little bit choppy.
-webkit-overflow-scrolling: touch;
Mobile Webkit browsers can scroll past the table in this example, but it's a little more glitchy.
http://jsfiddle.net/tArEy/1/
Does anyone have an idea of how to fix this using CSS only?
The demos have to be tested on a browser. (I'm running the Chrome browser on Android. I assume the iPhone has the same problem).
Edit:
It turns out that scrolling horizontally is horribly buggy in mobile webkit browsers without the following line in your CSS:
-webkit-overflow-scrolling: touch;
However, that line makes it impossible to scroll vertically so I'm kind of at a standstill. Other non-webkit browsers scroll horizontally just fine.
Edit 2:
I got my hands on an iphone. the overflow scrolling is hardware accelerated and works flawlessly. This seems to be a Chrome for Android problem only.
This was a bug in chrome for Android only. It was fixed in a recent upgrade.
this might help with the problem: http://filamentgroup.github.com/Overthrow/
overflow-scrolling is only supported in newer phones. when i've tested i've seen if newer phones have slight scrolling problems supporting android 2.x and ios4 will make you cry.
if you are scrolling horizontally you might want to rethink your design though.
Related
Morning all,
I need assistance with iPhone viewport issues. I have sifted through all kinds of posts, all from 8+ years ago. Some had a similar issue, some had the exact issue. Seems none actually found a fix.
I have developed a site and cannot for the life of me work out why only on iPhone the viewport is cutting off the left of the content. The site works as expected on android, macbook and desktop. I do not have access to an iPad. All completely responsive. When I say "cut-off" I mean you cannot scroll to the left at all.
I tested on an iPhone 8 and thought, ok, it is a bit old, probably just limited to older phones but alas, when I checked with friends on an iPhone X and 11 pro they both had the same issue. It is not an issue in landscape, only portrait.
Please see below screenshots:
Iphone issue where you can see that the content is shifted to the left
Galaxy S10 where you can see the content is centered as expected
As you can see from the above, it is like the phones are readying the viewport size correctly but they are shifting the content to the left. The banner at the top is set to width: 100%; and yet it does not stretch to the far right.
Also, bizarrely it seems that the nav is happily centered but all other content is not.
I am at a loss.
This must be a common issue with an easy fix that just isn't asked, I hope. I have built this using purely CSS and HTML so nothing fancy.
Entire code can be found here in my previously unanswered post which had a little less detail.
link to the site
For anyone in the future looking into this or a similar issue, it seems that iPhone's have challenges interpreting tags. This is not limited to Safari as I tested the code on Opera and firefox on an iPhone 8 and iPhone X and the same issue occured.
Not only did the CSS applied to the tag not take effect on the iPhone but it created some form of break in the page entirely.
tags are a little outdated as I understand however it added a nice aesthetic. Instead I created the same visual effect by entirely removing the tag and using bottom-border on the SVG.
I hope this helps someone in the future.
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
I'm trying to work with the nice parallax effect in this template. It seems to work well with all browsers except mobile Safari (unusually)!
http://wrapbootstrap.com/preview/WB002R8U1
Look at the ABOUT and FOURTH sections on an iPad and the background image goes missing (presumably because it's stuck to the top of the page behind the other elements.
Anyone know a workaround for this?
Many thanks.
parallax on mobile iOS is not that easy: safari blocks all rendering while scrolling (for performance boosting), therefore you can't measure the current scrolled distance and apply it to the background position. the picture would only refresh it's position when you've finished scrolling (and without animation, so you wouldn't see anything of it).
There are workarounds but they're not as easy to implement. one of them is http://markdalgleish.com/projects/stellar.js/ with its iOS techdemo.
Best solution: split your css markup and let parallax only be visible to desktop devices. As parallax needs a lot of power (because it's not hardware accelerated), it's not very suitable for mobile devices anyway.
I have a stylesheet and use overflow:scroll; in my css to blend in scrollbars. It works in Firefox but not on my iPad in the safari browser. There, no scrollbars are shown but it is possible to scroll with two fingers.
Now, is that normal that iPad doesn't show scrollbars? That would be stupid somehow.
You might want to turn it on with: -webkit-overflow-scrolling: touch;
Yes, I believe that is normal behaviour from iOS3 and upwards.
You might want to check it on android, as android does not support overflow:scroll at all, from what I am aware (no two fingers, no scroll bar, no way to view content beyond the fold)
More information on iphone/ipad scrolling