I'm not much of a programmer, but love to figure things out for myself. But now I have stumbled upon a little bug or mistake, which I can't wrap my head around.
When viewing my new site on an iPhone or small (Safari) browser, there is some grey area on the right sight. Its so frustrating.
Hope you guys can help me..
http://fluxx.tv/v2
http://i.stack.imgur.com/V5GeT.png
its browser scrollbar it comes when the page is bigger than the screen. two options are make the content very small or add overflow: hidden to your body or the container
Related
I know questions like this get short shrift on here for not containing actual code but I have been banging my head against a wall for over 2 hours here.
If you browse the site, you can see the site sits 100% width in the good browsers, but in ie11 when on the home page there is a horizontal scrollbar, something is stretching it beyond the browser width. I have taken things out systematically but it is driving me insane?
http://ag.splatwebsolutions.co.uk
Thanks
i think your problem is in this style.
.site{
display:table;
}
using Normalize.css might help
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
I've never come across this before. I just built a single page layout website for a client. It works fine on computers, but on tablets or mobile devices it just doesn't scroll.
There are menu items which trigger some jquery and scroll down to to the appropriate content when clicked - something I use often with no problems. These work on devices, but you can't use your finger to scroll.
The site is here: http://marcdeguerre.com/
I do have my html, body and other tags set to a height of 100%, thought that might be it. So I set them all to a height of auto when the viewport is below 767px wide. To no avail.
I changed all my background-attachments from fixed to scroll at that break point too. Didn't help either.
Has anyone come across this before?
Thanks a lot for any insight you may have!
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
I uploaded a modified version of my website earlier. It seems to work fine on my computer, but then I check my laptop downstairs, (small screen), and there doesn't appear to be a scroll bar to scroll down and see the navigation, so you're just left with a big image that doesn't do anything.
It's http://www.peach-designs.com - it'll only be up for a short time though as it doesn't yet work on small screens.
Hope you can help,
Kind Regards,
Snakespan
When I view the site in Chrome, the image covers the navigation because of the z-index ordering. Removing the z-index from #slider and the ul fixed the problem for me.