• Posted on: Jun 7, 2011
  • Tag:
  • Reactions: 9

> What you can really do with native position:fixed

The Kraken has been released, iOS5 will support native position:fixed and overflow:scroll. There seems to be a lot of misinformation about what you can really do with such functionalities and why you’ll still be needing iScroll (or other scroll views). Let’s try to clarify a little.

Update: beta 2 is out, and brings some exciting news.

It seems that iOS5 will finally support position:fixed. This is the best news since transform3d() and it’s even more exciting if you think that Android already supports it since v2.1 (a bit of consistency every now and then doesn’t hurt).

In some scenarios you won’t be needing iScroll to have a fixed header or a scrollable portion of the screen, and I couldn’t be happier about it. What doesn’t seems to be clear is when and where native position:fixed is going to really save your life. (Quick answer: not so often).

position:fixed

You’ll be able to fix elements on screen with just one CSS property and the page will scroll underneath (no JS required). The problem is that the scrollbar still goes over the fixed elements. If you set a header or a footer they stick on top and bottom but the page size is still the whole screen so the vertical scrollbar goes from the very top to the very bottom covering your fixed elements. This might or might not be an issue, you decide.

A good setup in this scenario is a fixed thin left column dedicated to menu icons and a right scrolling contents area. Or maybe a top left icon which opens a slide in menu. In both cases the scrollbar won’t overlap your precious GUI.

What you can’t still do is a 2 scrolling columns layout (ala iPad) for example. To our rescue comes overflow:scroll.

overflow:scroll

What we really need is the ability to set a scrollable area. This is done thanks to overflow:scroll apparently also supported by iOS5. The problem here is that one finger scrolling inside a div has scrollbars, momentum and zoom disabled. Yes, is that useless.

So let us rejoice about the new features, but we are far from retiring javascript scrollviews.

Please note that my comments are based on internet rumors about a beta iOS5 release. Apple is not new at stripping out features from golden master.

As a side story, iScroll v4.1 will be out soon with performance improvements. Stay tuned.

/Share the joy

/Reactions

    • Author: Daniel J. Pinter
    • Posted on: 2011/06/07
    • At: 20:42

    Yep, it good news, if you like maintaining & updating code.

    • Author: Daniel J. Pinter
    • Posted on: 2011/06/07
    • At: 20:43

    P.S.: Great news on 4.1! Thanks!

    • Author: Chris Jones
    • Posted on: 2011/06/08
    • At: 05:20

    I can confirm that iOS five supports fixed headers because I’m typing this comment on my iPad 2 running iOS 5! I just discovered thIs feature in Safari and I was thrilled!

    • Author: Beau
    • Posted on: 2011/06/08
    • At: 07:54

    Hey There,

    Thats great news! Do you have a more approximate release date on 4.1? even just a month :)

    • I’d say… today.

    • Author: foobored
    • Posted on: 2011/06/08
    • At: 10:51

    AWESOME!

      • Author: foobored
      • Posted on: 2011/06/08
      • At: 10:55

      The release news I mean :) I’m already testing with the 4beta and it’s great fun using it … works like a charm on iPad1+2, iPhone4, down until 3G — just the old Android phones with Android 2.0 and less have issues due to that lack of hardware acceleration (AND no position fixed).

    • Author: Ola
    • Posted on: 2011/06/10
    • At: 07:35

    Will you be able to use fixed with background-attachment on iOS5?

    • Author: A
    • Posted on: 2012/06/15
    • At: 12:27

    I want to show some ‘ul’ result in a small div with scrollbars instead of that the user need to scroll the full page, now i have made it work by css:-webkit-overflow-scrolling: touch;,Usually it work but when i change the view of ipad it broke down.

    eg:

    ul ul ul ul
    #leftPanel{
    overflow-y: scroll;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    height:100%;
    }

    In Landscape view the height of div is not enough to show all ‘ui’ then scroll bar is work,at this time,change the view to Portrait view,the height of div is enough to show all ‘ul’ so that the scroll bar is disable automatic,finally changed the view back to Landscape the scroll bar is missing,is not scrollable Is there a solution to get this working?