I am having an issue that seems to only happen on iPhones using Safari. When I scroll to the bottom of the page there always seems to be a little bit of text cut off and some weird flickering. You can eventually get to the bottom but flickering a screen up and down and you will reach the bottom of the screen. I am curious if anyone has experienced this issue before and if there is any way to improve this scrolling. Beside that I don't really have any special css applied to this div.
I found this article https://developer.apple.com/forums/thread/689995 and already tried applying
-webkit-overflow-scrolling: touch;
but it didn't really work for me. If you have any suggestions please let me know.
Related
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 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 have a mobile chatroom i'm using. Whenever I load it up in safari on an iphone. Clicking in the text area brings up the keyboard, which I want but the keyboard completely ruins the layout of the webpage. How do I fix this? Heres a link to the http://www.306radio.ca/mobile/chat/
From a quick look, it looks like the issue you are having is coming from the div#userContent having a style of float: left, and the div above it having position:absolute. Those two seem to be causing the reflow you're experiencing.
I removed the float and removed the positioning, and that solved the reflow, but it looks like there could still be issues with JavaScript resizing the widths of things on the page.
Unfortunately, I don't have time to look into it, but this should fix the issue your question asked.
Keep digging in to CSS, and especially responsive design, and you might be able to solve this solution with less CSS and JS code.
I'm working on http://www.lceonline.co.uk
When working on a smaller screen res, anything less than 1000px, I'm getting a horizontal scroll bar appear. This happens on all browsers.
I've tried
overflow-x : hidden;
but then the web pages' background doesnt repeat, it just seems to be one large gray background. It also is a css-3 property, One i'd rather try and avoid.
I've had a look at the sites' DIV tags and still cant see what is actually causing the problem. I havent built this from scratch, someone else worked on it before me and I feel they have used too many containers.
Can someone provide me with a possible solution on how to get rid of it?
Thanks
Your issue is that
#page-container and #page-container2 both have width:1000px;
If you remove the width from both of those the scrollbar disappears, as does the centring and the gray background.
Thanks in advance for helping me with this problem, it's driving me up the wall.
I have a site that renders fine with firefox, chrome, safari but on IE the vertical scroll bar is not functional.
I'm using sticky footer css to make sure the footer is pushed to the bottom and it works fine in the other browsers but I suspect it's affecting the height in IE
any help is appreciated.
The site is up at dev.rakozi.com
thank you.
Well firstly in Chrome you don't get scroll bars at all, no matter how high the window is (because the footer is set to fixed).
In ie 7 you get scroll bars that appear but scroll to nothing. In ie8 the footer doesn't stay fixed properly, but you don't get scrollable scroll bars (and for some reason the background gets corrupted on my computer if I adjust the height too much).
Can you clarify your question a bit more, what exactly are you trying to achieve?
Removing height:100% from the body in ie7 makes the scroll bars go away, if that helps?