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
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
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.
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.
Take a look at this fiddle:
http://jsfiddle.net/jvvmU/2/
Render it in Firefox and IE7.. In Firefox, it works fine, but in IE, a long scrollbar shows.
How to fix this bug?
Note: I've also this problem in Android based browsers, in landscape mode.
The cause of the incompatibility in IE7 here is that the width of the html document is smaller than the width of the element labelled id="e". In the fiddle that you've provided the view port is about 660px wide, if the element e is 660px or less, then the green box appears as in other browsers.
What are you trying to achieve here? Are you sure that css is the best way to achieve your goal?
The code : http://jsfiddle.net/YM5Cb/
Please take look at the fiddle.
I am trying out webkit models. I was experimenting with horizontal box layout.
See the top right panel, its height is more than its parent.
How to make its height same height as its parent
The above demo works only in chrome and safari. I am learning to create HTML 5 apps for android and ios device. Thats why i am using webkit. So its enough for the code to work on chrome and safari, so it will work fine in ios and android devices
maybe you can try to set the property height:auto for child boxes/divs