StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Unfortunately you are probably best off using <code>absolute</code> positioning for your <code>fixed</code> elements when working with IOS. Yes, IOS5 does claim to support <code>fixed</code> positioning, but it all falls down when you have interactive controls within that fixed element.</p> <p>I had the same problem with the search box on my <a href="http://switchitoff.net">switchitoff.net</a> site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <code><div></code> which sits over the search box. When this <code><div></code> is clicked the following occurs:</p> <ol> <li>The page is scrolled to the top</li> <li>The <code>fixed</code> header is changed to <code>absolute</code></li> <li>The <code><div></code> covering the search box is hidden</li> <li>The search <code><input></code> is focused</li> </ol> <p>The above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.</p> <p>There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your <code>fixed</code> area with <code>body</code> elements scrolled behind them, this can break your touch events. </p> <p>For example, on <a href="http://switchitoff.net">switchitoff.net</a> the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. <code>touchstart</code> was not even being fired when these buttons where tapped. Luckily <code>onClick</code> still seemed to work, although this is always a last resort for IOS because of the delay.</p> <p>Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?</p> <p>Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with <code>absolute</code> positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload