/    Sign up×
Community /Pin to ProfileBookmark

iPhone CSS vertical scrollbar

Copy linkTweet thisAlerts:
Apr 23.2011

I am tweaking my site’s css for the iPhone, and I have run into an annoying problem related to vertical scrolling. Basically, when the page has enough content to trigger scrolling, a gap appears on the right side of the screen with the background color showing through. So all of the navigation bars, background image, page content, etc is shifted over to make space for this useless gap.

I have tried to adjust the overflow to hidden, auto, visible… more or less everything I can think of, but the gap always appears. Very annoying and completely useless.

Any ideas?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Big_O_1_Apr 23.2011 — could be a problem with the width of the page. Can you show a link to the site so we can check it out?
Copy linkTweet thisAlerts:
@mimewearauthorApr 23.2011 — I have solved to problem, though I am not entirely happy with the method. So if anyone has any experience with styling for the iPhone (and any other tiny screens), I would love to hear from you.

So from what I can gather, Safari on the iPhone is in two minds about wanting to display a scrollbar, despite the fact that it already has its own version of a scrollbar that shows up when zooming, etc. It leaves the extra space where the scrollbar would be when viewing the page with Safari on a regular computer, but it does not render it presumably because it knows that it doesn't need to. Oddly, some of the webkit css exceptions work and others don't, which is typical - I would have heard about some guy winning the Nobel Peace Prize if he had developed a compliant browser.

Anyway, my work-around, which I don't like because of it the added layer of div-nesting, was to wrap the entire page content in a div with an id that will only be addressed by a webkit rule for the iPhone. The rule gives a width of 130%, which is of course is ignored by every other browser. Since all of the widths on the pages are given as percentages of the parent, then everything is stretched out to fill the screen nicely.

I hope this helps anyone who comes across this bizarre behaviour. I don't think this is the best solution, but it works for now. As I say, if anyone has a better solution please let us all know.
Copy linkTweet thisAlerts:
@mimewearauthorApr 23.2011 — The widths are all set to 100%, Big O(1), so everything should stretch out to fill the page. When I gave the parent divs (there are about 4-5 containers for subsequent content) widths above 100% they did stretch across the page, but results were erratic. I didn't want to have to make special exceptions for everything on the page, so that's what led me to making to one "magic div" that applies the the iPhone only. And I suppose if I have the same issue for the Android or whatever, I already have a starting point.

Anyway, if anyone is interested in looking, its at www.wordchute.com/jamesmehaffey. (My CSS is not the cleanest, but that's kinda what this weekend is all about.)

Just a note: the main content (below the nav bar) differs when viewed with an iPhone in that it does not have the margins on either side.
Copy linkTweet thisAlerts:
@SanderDeclerckApr 28.2011 — Hi mimewear,

I see you're not making a "real" mobile webpage adjusted to the small screen mobile have. So I can't tell my advise will help, but from my past experience in making mobile website, you should always use this meta-tag for a mobile website:
[code=html]<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>[/code]

However, it seems you want the user to be able to scale the website, so instead of my line, use:
[code=html]<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>[/code]

I hope this helps you, if it doesn't, just reply and I'll try to look further into it!
×

Success!

Help @mimewear spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...