Home page bug (iOS)

by kapowaz, Tuesday, March 05, 2013, 15:04 (4290 days ago)

So, if you're visiting the news page on an iPad, you see this kind of thing:

[image]

…because the main header has position: fixed — if that were changed to position: absolute, problem solved. Any chance that can be looked into?

Home page bug (iOS)

by thebruce ⌂, Ontario, Canada, Tuesday, March 05, 2013, 15:11 (4290 days ago) @ kapowaz

So, if you're visiting the news page on an iPad, you see this kind of thing:

…because the main header has position: fixed — if that were changed to position: absolute, problem solved. Any chance that can be looked into?

Aye...

If the site template can decide whether to fix or static the header, that would be best. But if it's position:absolute, then the whole design of the scrolling sub-window content is rendered moot.

Ideally, if the site detects a mobile browser, then set position:absolute, otherwise set position:fixed.

I ran into that exact problem recently with a redesign of my company's site, simply because the touch-zoom feature of mobile devices isn't really a standard browser thing you can trap easily, so without complex javascript to detect viewport alterations/sizes after the fact, fixed elements become a pain to work with. Easiest solution is just that - don't make them fixed on mobile devices.

Home page bug (iOS)

by kapowaz, Tuesday, March 05, 2013, 15:32 (4290 days ago) @ thebruce

Ideally, if the site detects a mobile browser, then set position:absolute, otherwise set position:fixed.

A header like this needn't be absolutely positioned anyway, since it's the first thing on the page. Seems like an odd choice to me, but then I've not delved into the rest of the markup to see how it's structured.

I ran into that exact problem recently with a redesign of my company's site, simply because the touch-zoom feature of mobile devices isn't really a standard browser thing you can trap easily, so without complex javascript to detect viewport alterations/sizes after the fact, fixed elements become a pain to work with. Easiest solution is just that - don't make them fixed on mobile devices.

Position: fixed used to be unsupported in earlier versions of iOS, but now it's actually supported it sometimes feels like more trouble than it's worth. I only really zoomed in my screenshot there to make it obvious what I'm talking about (I usually zoom in on the news column anyway, but as it's a lower level of zoom it wouldn't necessarily be clear in a shot like that.)

Avatar

In the works

by Beorn @, <End of Failed Timeline>, Tuesday, March 05, 2013, 15:39 (4290 days ago) @ kapowaz

Yeah, the site can get ugly on mobile browsers. I know Sorahn is on it, though. I don't know what his timeline looks like, but I'm pretty sure he'll be okay with me saying Soon™.

Home page bug (iOS)

by thebruce ⌂, Ontario, Canada, Tuesday, March 05, 2013, 16:11 (4290 days ago) @ kapowaz

A header like this needn't be absolutely positioned anyway, since it's the first thing on the page. Seems like an odd choice to me, but then I've not delved into the rest of the markup to see how it's structured.

Yeah, it doesn't need to be but it does depend on what else is done on the page structure.

Position: fixed used to be unsupported in earlier versions of iOS, but now it's actually supported it sometimes feels like more trouble than it's worth.

Mainly the problem is if it's fixed - it does remain in place, but it's also affected by zoom, which means it'll zoom beyond the viewport, but there's no way to scroll to see what's of the screen because it's not affected by scroll :P You can write a script that checks the viewport size then resizes all fixed elements to be shrunk and visible again, but that just causes even more headaches... mobile developers should use :fixed very conservatively, imo. Great for desktop, notsomuch for mobile.

Back to the forum index
RSS Feed of thread