Fixed positioning in Mobile Safari

11/16/2010: It’s been a long time since my fixed positioning script was released. I’m very pleased that it was the precursor for much more robust solutions to this problem. Please continue on if you’d like to read through the history of this hack. If you’re looking for a real-world solution please take a look at one of the following, ranked (subjectively) in order of scroll performance:

  • Sencha Touch – A complete framework with fixed scrolling, custom widgets, and more.
  • YUI Scrollview – Standalone solution built on YUI3
  • iScroll – Completely standalone, no library dependencies

Update: An anonymous genius in the comments suggested using translateY instead of top for the animation. After some edits I’ve updated my demo, and it flies! The scrolling animation is smooth as silk. Apparently Webkit transforms are the only hardware-accelerated animations at this point. Thanks, random dude on the internet!

Update 2: This code is released to the public domain. You can use, modify, remix as you see fit.

Behold, fixed positioning on iPhone! http://old.doctyper.com/stuff/iphone/fixed/

Here’s a video for those without iPhones. This is running in the iPhone Simulator bundled with the SDK. Note that the animation is much choppier on an actual iPhone.

With the release of iPhone OS 2.0 came some great improvements over previous Mobile Safari versions. CSS animations are in (though buggy), as well as native touch events like touchstart, touchend, gesturechange, etc.

I played around with these new goodies while hunting for improvements to build into Pickleview. The most fascinating change to me was that you can now prevent the default behavior of elements with a simple preventDefault() call. It allows a user to drag an element around the screen without having to worry about the viewport wobbling about.

I grew curious as to what I could specifically call this on, and started testing out several elements. Turns out you can preventDefault on everything in the DOM, including the body element. This seemed incredibly useless for no other reason than the terrible usability it would bring if you couldn’t scroll the viewport. Then the proverbial light bulb went off: fixed positioning!

First, let’s recap why fixed positioning does not work off-the-bat. Mobile Safari uses a viewport to show you websites. Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.

This renders fixed positioning null and void on iPhone. An element that has its position fixed is affixed to the body, not the viewport. So it is actually working as intended, though most people would prefer it attached to the viewport.

There are workarounds in the wild, but these are inelegant. You can reposition an element onscroll, but a scroll event in Mobile Safari is only fired after scrolling has stopped. This results in an evident “glitch” since you have to a) flick to your desired position, throwing the element off-screen, and b) wait for the element to reappear in the viewport after scrolling has stopped.

By disabling the default scroll behavior on the body element, you essentially glue the viewport down to its initial starting point, where it’s unable to go anywhere. This limits the viewport to exactly 320×416 pixels of space to show you. In this state, you have a perfectly useless experience.

This is where it gets interesting. In order to re-enable scrolling, I needed to only make the content area scrollable (think iframe, with header and footer above and below it). The touch and gesture events gives access to X/Y values, as well as timers and offset values. So by logging these and incrementing the top offset of the content area, we can create a scrollable block that does not affect the header or footer elements. A little spit and polish later: voila!

It’s pretty evident from my proof-of-concept that CSS animations need a lot of work. They’re promised to be “hardware-accelerated”, but there’s little proof of this. Most animations glitch, some to the point of non-use. The scrolling isn’t particularly smooth and even something as simple as animating a ‘top’ CSS property takes its toll. Still it’s usable, though I hope later Mobile Safari builds will address these issues.

If you’re interested, I’ve bundled together the source files for my proof-of-concept. Grab ‘em here.

del.icio.us:Fixed positioning in Mobile Safaridigg:Fixed positioning in Mobile Safari

66 Comments

  1. James Craig
    August 14, 2008
    10:49 am
     

    That’s pretty killer. Thanks for sharing. Seems like a (browser) bug that it allows you to permanently hide the location field, but other than that, this shows a lot of potential.

  2. Joe Doe
    August 14, 2008
    11:04 am
     

    Only a few of CSS properties are hardware accelerated during animations. In particular, animation of the webkit-transform property is hardware accelerated, animation of top is not.

  3. Use CSS transforms
    August 14, 2008
    11:28 am
     

    Cool effort. Use translateY instead of top and you’ll get much, much better performance.

    @James: Touching the status bar still reveals the location field.

  4. James Craig
    August 14, 2008
    12:16 pm
     

    Ah yes. Then I suppose you could scrollTo(0,1) again on any document touch event. Potential is growing.

  5. Kent Brewster
    August 17, 2008
    3:41 pm
     

    Nice work! I’d love to be able to turn fixed positioning on and off with a switch inside the app. How would I go about removing the event listener? This:

    document.body.removeEventListener(”touchmove”, function(e) { e.preventDefault(); }, false);

    … doesn’t seem to do it.

    –Kent

  6. doctyper
    August 18, 2008
    3:37 pm
     

    @Use CSS transforms: Thanks guy! I’ve updated my demo and used translateY. It’s silky smooth now!

    @Kent Brewster You can only remove named event handlers. So:

    var preventBehavior = function(e) {
      e.preventDefault();
    };
     
    // Enable fixed positioning
    document.addEventListener("touchmove", preventBehavior, false);
     
    // Disable fixed positioning
    document.removeEventListener("touchmove", preventBehavior, false);

  7. Prasad
    September 5, 2008
    4:54 am
     

    Great tutorial, I am really look for this example. Thank you very much for sharing.

  8. Nigel
    September 25, 2008
    8:38 am
     

    This will reposition after each scroll, which is ok if your using the panel as a control-panel…

    window.onscroll=setCtrl;

    function setCtrl()
    {
    var h = document.getElementById(”footer”);
    // where 50 is the height of the panel
    var h = (window.innerHeight + window.pageYOffset) – 50;
    h.style.top = h.toString() + “px”;
    }

  9. Martiweb
    September 30, 2008
    2:35 am
     

    in iphone 2.1 you can now have fullscreen web apps as long as you add the app as a webclip, im trying to build an app where the content div is continously reused i.e the innerHTMl keeps getting replaced. an example of a problem im having is i replace the content of the content div, then want to inject the UL back into the content div getting the li’s clickable/scrollable. any help would be appreciated.

  10. John Haugeland
    September 30, 2008
    7:18 pm
     

    There’s no need for any of this, actually. The fundamental problem is that you have a viewport which doesn’t match the size of your document. Safari is correct for fixed positioning to be in relation to the document; that’s what separates it from absolute positioning.

    The appropriate fix is to add width=device-width in the viewport meta tag argument list. That sets the document width to match the available real estate, and simultaneously implies an initial scale of 1.0. Combine that with preventDefault() to prevent finger scrolling of the page and user-scalable=no to prevent resizing of the page, and you’ve got a winner.

  11. John Haugeland
    September 30, 2008
    7:23 pm
     

    Martiweb: it’s a little hard to understand the problem you’re having, but I think this might be what you want:

    .style1 { color: red; } .style2 { color: orange; } .style3 { color: yellow; }
    .style4 { color: green; } .style5 { color: blue; }

    function ExampleForMarti() {

    var TheBody = document.getElementById(’thebody’);
    var SomeText = document.createElement(’p');
    var SomeList = document.createElement(’ul’);

    for (var i=0; i<5; ++i) {
    var Item = document.createElement(’li’);
    Item.className = ’style’ + i.toString();
    SomeList.appendChild(Item);
    }

    SomeText.innerHTML = ‘I am the very model of a modern major general.’;

    TheBody.appendChild(SomeText);
    TheBody.appendChild(SomeList);

    }

  12. John Haugeland
    September 30, 2008
    7:24 pm
     

    Grr, my code example’s HTML got stripped instead of quoted. That requires a body with the id “thebody”, and obviously those CSS rules go in a style block.

    It was there. Really.

  13. Florian
    October 1, 2008
    10:55 am
     

    On position: fixed

    http://www.w3.org/TR/CSS21/visuren.html#choose-position

    “In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn’t move when scrolled.”!!!!!!!!!

    fucking apple should read the fucking standards!

  14. John Haugeland
    October 1, 2008
    6:10 pm
     

    Apple is correct. The iPhone does not present stylesheets for the “handheld” target type (nor should it, given the screen resolution). The iPhone acts on normal browser stylesheets, as it provides normal browser pages, not reduced-version handheld pages.

    Handheld is for things like Nintendo DS Opera.

  15. Florian
    October 2, 2008
    3:22 am
     

    @John Haugeland

    You fail, can you read the spec? You know, those who can read are at an advantage right?

    http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

    QFT: “… for a fixed positioned box, the containing block is established by the viewport.”

    You can claim any amount of BS, and you have, but it’s not going to change what is in the CSS spec.

  16. John Haugeland
    October 3, 2008
    6:23 pm
     

    Florian: you’re a bit angry there. It’s a simple mistake. No need to get nasty.

  17. Matteo
    January 5, 2009
    4:40 am
     

    You may find my solution useful. http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5

  18. Matt Brubeck
    March 11, 2009
    3:01 pm
     

    As of the “cupcake” branch, this now works in Google Android’s version of Webkit too.

  19. Babs B
    April 21, 2009
    10:41 am
     

    Great article and script – Thanks Richard

    I’d like to follow up what James suggested about bringing back the location field.
    I’ve tried his suggestion by using scrollTo(0,1) on all touch events but it does not work.
    Any ideas how you can get the location field back once you scroll to the top without touching the status bar?

    Thanks everyone.

    Babs

  20. Martin
    May 16, 2009
    11:23 am
     

    Thanks for sharing this. I’m trying to make a nice controller for media player daemon on my server and this is a perfect starting point (I’m not at all good a javascript). I’ve found that if I have a short list in the container that has a height less than the distance between the top and bottom bars, the scrolling behaves badly. I hacked it so that it seems to be working by looking at the value of ‘boundary’ in line 219 and only allowing scrolling if it is < 0. Thanks again so much!

  21. JJ
    May 25, 2009
    4:39 am
     

    Is FlowJS dead? Google has almost nothing about it. Nobody seems to talk about it or use it (or even know it). I like it because it seems very simple (I just want a couple of AJAX calls for now) and small. But I don’t wanna spend time familiarizing myself with something that will keep me behind everybody else…

  22. Derek
    June 26, 2009
    6:32 am
     

    A noble attempt, though (as to be expected) still buggy as all hell.

    Keep at it though, very promising!

  23. Corey
    June 26, 2009
    9:16 pm
     

    Amazing!!! Thanks a lot, u just made my life a whole lot easier!

  24. Cookie
    July 1, 2009
    7:02 am
     

    Hello,

    Thank you very much for this script.
    I have a small question about the links.

    When I use that “Nothing”, no problem.
    But how to call a javascript function?
    I tried that “Nothing” but it does not work.
    Can you help me please?

  25. Cookie
    July 1, 2009
    7:08 am
     

    Sorry there is a problème with de code :

    When I use that “Nothing”, no problem.
    But how to call a javascript function?
    I tried that “Nothing” but it does not work.

  26. spez86
    July 11, 2009
    10:08 pm
     

    To start off, awesome work to everyone. This info has definetely helped me understand the structure behind how the iPhone and safari allows us to view web pages. I have been developing web sites for a long time, but have only recently begun developing mobile apps. Disabling the viewport was exactly what I was looking for when trying to create a fixed area on my webapp, but however awesome this method is, it does still provide so functional problems, especially with the way the viewport is being used (portrait or landscape). So after implementing the info addressed above and many other attempts that have been made public, I began to think if instead of disabling the viewport, is there any way we could actually control it. I see the viewport as more of like a mask that sits on top of the page. I wonder if there is a way we could disable parts of it instead of all of it.. For example, disable it at the top of the page for a fixed header. Enable it in the middle. And then disable it again at the bottom. This could solve the scrolling animation issues. I’m just trying to start a discussion and this seems to be the best place to do it. It may not even be possible, but it wouldn’t hurt to brainstorm. Anyone have any ideas?

  27. Alexander
    July 23, 2009
    2:41 am
     

    I downloaded the demo code and tried it with Palm Pre emulator and Android emulator. It does not work there (?!) Again cross-browser problems? Can anybody say something about it?

  28. Meron Lavie
    August 30, 2009
    10:49 am
     

    Thanks. However what do I need to do so that pressing on one of the fixed-position toolbar buttons actually does something (such as refering to another URL)? From what I can see, pressing on any of the tooldbar buttons only makes it turn blue (”selected” status – but nothing else).

    TIA

  29. doctyper
    August 30, 2009
    10:56 am
     

    @Meron

    It’s a proof-of-concept. Feel free to modify the code and take it from there.

  30. Meron Lavie
    August 31, 2009
    3:33 am
     

    Hi Doctyper,

    Thanks for the quick response!

    I must have been distracted – the OBVIOUS answer was to add “onclick” for the footer toolbar buttons’ tag.

    But I have a new issue: if I hold your demo horizontally (landscape) the footer toolbar is displayed in the middle of the page (instead of the bottom) and repositioning the iPhone verically (protrait) doesn’t solve the problem – the footer stays in the middle there, too. I know this is just proof-of-concept – but I’d appreciate any suggestions.

    Lavie

  31. MT
    September 5, 2009
    4:23 pm
     

    Thanks for sharing the code. I noticed that bottom tab bar doesn’t get reposition to the bottom after changing the orientation. I want to handle this orientation change event to reposition the footer. Can you please let me know how I can modify the code?

    Thanks

  32. Angela
    November 23, 2009
    9:32 am
     

    Is there a way to stop the rotation on iPhone. I need my website only to be seen on portrait. Can you tell me suggestions!!!!???? Thanks

  33. Chris
    November 24, 2009
    1:52 pm
     

    I tried right now on android 1.6. It also works there. Just a bit slower, but works. Thanks, I need it for multiple platforms.

  34. David Alexander
    January 14, 2010
    4:13 pm
     

    @MT – yes it looks like the ’scroll’ event gets automatically triggered after the ‘orientationchange’ event has fired. This instantly adds the ’scrolled’ class, which has just been removed, back to the element.

    Afraid I can’t see a way round this unless you comment out Ln.127 “window.addEventListener(”orientationchange”, $i.utils.updateOrientation, false);” which would prevent the address bar being hidden when the orientation changes, so the lack of ’scrolled’ class would in fact be correct.

  35. David Alexander
    January 14, 2010
    4:15 pm
     

    * Correction : Comment Ln.123: “window.addEventListener(”orientationchange”, $i.utils.hideURLBar, false);”

  36. Anni Kotilainen
    January 18, 2010
    2:45 am
     

    The problem with the “scrolled” class being re-added can be fixed by adding a constraint so that it’s only added if there has been at least, say, 1 second since the last orientation change.

    Below is the modified piece of code.

    this.orientChangedAt = new Date().getTime();

    // Can’t prevent user from tapping status bar
    // So instead, readjust fixed positions
    window.addEventListener(”scroll”, function() {
    $i.utils.addClass(document.body, “scrolled”);
    if (new Date().getTime() – this.orientChangedAt < 1000)
    $i.utils.removeClass(document.body, "scrolled");
    }, false);

    // Remove scroll class on orientation change
    window.addEventListener("orientationchange", function() {
    $i.utils.removeClass(document.body, "scrolled");
    this.orientChangedAt = new Date().getTime();
    }, false);

  37. Sijo
    January 22, 2010
    6:13 am
     

    Wonderfull demo ….its very much helped me . am a fresher in Iphone programming.. was confused about how this can do… Demo helped me alot………thanks for sharing…..

  38. Sijo
    January 22, 2010
    6:14 am
     

    Its very good post..thanks for sharing

  39. Bob
    February 4, 2010
    3:40 pm
     

    Thanks for the wonderful script. An issue I am running into is that I load some of my “’s” via ajax. This happens AFTER the page has already been loaded. As soon as I remove the “fixed.js” file everything works correct. What I am assuming is that because I am adjusting the content of the “content” div on the fly the fixed.js file is “confused”.

    Is there a way to “refresh” your stuff after the content has been added?

    Thanks!

  40. will
    March 20, 2010
    5:20 am
     

    What emulator did you use to make the video?

  41. ashish
    March 21, 2010
    8:27 am
     

    Hi,

    I am loading the file in UIWebView and hiding the scroll
    I want to scroll the page programatically by number of lines of text. Any help how can I do that using java script.

  42. John
    April 1, 2010
    4:00 pm
     

    Hi,
    Is it possible to dynamically change the height of container using jquery???

    body.scrolled[orient="landscape"] #container
    {
    height: I want to chnage using jquery
    }

  43. Philip Dahl
    May 11, 2010
    4:51 am
     

    There has to be a way for the browser to be refreshed for multiple reasons. One for when your internet fails and you need to restart it to load the page again. Two, when I move from landscape to vertical view and visa versa, the bottom fixed menu stay in it’s previous position making it stuck in the middle of the site or out of view (and unable to be scrolled to because it is fixed outside of the viewport.)

    is there a fix for this? I read most of these and no one specifically mentions this glitch.

  44. Kev Adamson
    June 28, 2010
    7:21 am
     

    How about a fix for “background-attachment: fixed;” for iPhone, and written in JQuery. That would be ace :)

  45. kurt
    August 6, 2010
    5:08 pm
     

    Thanks for the fixed footer/header tutorial. Saved us a bunch of time trying to incorporate fixed heders/footers in a UIWebView. Much appreciated!

  46. David
    September 3, 2010
    8:29 am
     

    Hi. Thanks for great explanation. Two years old post and still very useful! I did the test on Android platform – works well too. The only issue I have found is related to single tap on the link – for some reasons it is not always working. After deeper investigation it appeared that e.target in touchstart event sometimes points to the text node instead of to html element. The workaround is to make sure which element you accessing. Example
    (e.target.nodeType === document.TEXT_NODE ? e.target.parentNode : e.target).doSomething()

    Btw – the latest webkit (installed with Android 2.2) supports correctly position.fixed.

  47. scott chu
    September 6, 2010
    8:58 pm
     

    Hi, Richards,

    I saw your fixed header + scroll within a range demo. It’s quite impressive. What I plan to do is quite like your exmaple, except the scrollable region’s content is replaced with an image & I wish I can still scale them within this region.

    Is it possible?

    Best Regards,

    Scott

  48. Derek Hansen
    September 16, 2010
    10:09 am
     

    I’m not sure if this thread is still active, but here it goes.

    I’ve successfully used your demo on my own site and it works, except that regular links, email, and telephone numbers don’t work. I tried modifying the script to parse “a” and “href” tags, which works for links and the email “mailto” links, but telephone links “tel:” are still broken. iPhone can automatically parse “tel:” format, but not with the current script.

    Help?

  49. Komal
    September 17, 2010
    5:46 am
     

    Hi,

    I tried the above demo for android 1.6 works well,

    but If I replace with plane text then the footer also slides along with the contents…

    How can I get this working…?

    thanks,
    Komal

  50. Doug
    September 25, 2010
    12:43 pm
     

    This is super sweet. The only bug that I can find is that it breaks down when you use textarea. Text areas don’t seem to trigger an ontouchmove event so there is no good way that I have found to preventdefault. Anyone else have any ideas?

  51. Jaimin
    December 2, 2010
    5:12 am
     

    Hi,
    on this page(www.yourwebsitepreview.com/transout.com/final/products2.html) The right hand side menu postions should remain fix , only the content area should scroll. This works well in all the browsers including safari. But the same doesn’t work in iPad.

    I’ve used iScroll but no luck. Can you please suggest any other method / twicks in CSS?

    CSS : http://www.yourwebsitepreview.com/transout.com/final/css/inner_style.css

  52. Dipak
    January 5, 2011
    1:37 am
     

    Doesn’t work well when you switch orientations

  53. sanober
    January 11, 2011
    11:24 pm
     

    I actually want div at bottom of my page.Its absolutely working fine in portrait view ,but for landscape view..it’s getting stuck at middle of d page….Please help me to get rid of it.

  54. Dion Snoeijen
    January 21, 2011
    4:14 am
     

    It was very(!) slow on iPhone4 if you change:

    var translateY = parseFloat((/translateY\((\-?.*)px\)/).exec(transform)[1]);
    to:
    var val = transform.toString();
    var translateY = parseFloat(val.substring(17, val.length-8));

    and
    element.style.webkitTransform = “translateY(” + value + “px)”;
    to:
    element.style.webkitTransform = “translate3d(0px,”+value+”px,0px)”;

    This will speed up the y translation tremendously.

    Thanks for the code by the way :) .

  55. Duncan Freeburn
    March 19, 2011
    7:36 am
     

    I’m having an issue with landscape orientation. The script works fine when I load the page in portrait and rotate to landscape – the attribute gets added to the body tag and grabs my CSS. However, when I refresh in landscape mode, it doesn’t seem to fire the updateOrientation() function to add the attribute. Has anyone experienced this? Any thoughts?

  56. Jitendra Vyas
    April 14, 2011
    1:39 am
     

    I checked your demo http://old.doctyper.com/stuff/iphone/fixed/

    It’s working fine is iPhone Safari but not in Android Browser. Can we make this compatible with Android too?

  57. Skyscraper
    April 20, 2011
    2:36 am
     

    hi! =)

    if (navigator.platform == ‘iPad’ || navigator.platform == ‘iPhone’ || navigator.platform == ‘iPod’) {
    window.onscroll = function() {
    document.getElementById(’footer’).style.top =
    (window.pageYOffset + window.innerHeight – 80) + ‘px’;
    }};

  58. Ludovic
    May 10, 2011
    7:39 pm
     

    Hi,

    Just wondering how can I let the url bar in the screen, I mean that I don’t want to hide the url bar.

    Thanks,

  59. Philip Peterson
    June 14, 2011
    11:24 pm
     

    You may want to reconsider releasing it in the public domain. This can create legal trouble for you and potentially for people outside of the US. Please read http://code.google.com/p/support/wiki/FAQ#Can_I_host_code_that_I_have_placed_in_the_public_domain? to see why.

  60. Tokay
    July 6, 2011
    10:33 pm
     

    So it works fine in Mobile Safari from your site or if I host locally on my own web server. Yet when I use a UIWebView, with everything bundled internally within the app, and loaded from files it doesn’t work (it all scrolls). Any wisdom appreciated.

  61. Lose weight
    July 31, 2011
    1:32 am
     

    Extremely interesting post thank you for sharing I just added your site to my bookmarks and will probably be back. By the way this is off subject but I really like your blogs layout.

  62. Toni Michel
    August 29, 2011
    3:37 pm
     

    Hello there! i’d like to thank first for this amazing script, but i have problems when i chanche a little bit the HTML,

    lets say i only have long content here , how can I use it?

    THANKS!

  63. Sean
    September 7, 2011
    10:37 am
     

    Thanks Richard! Works great on the 3gs, and the 4, as well as in Gingerbread, and doesn’t block Firefox 6 Mobile from working with it’s own overflow on the content element. It was pretty easy to implement also. Good coding, and very impressive that it works 3 years later given how fast mobile browser development has been going recently.

  64. Mark Mattson
    November 22, 2011
    7:21 am
     

    What is with the iAds popping up when we use iScroll and YUI? These render our dev efforts useless and crass. I know what these iAds are. My question is are they dev embedded or phone preferences? Can I shut them down forever?

  65. failitive
    December 6, 2011
    4:47 am
     

    Angry Birds

  66. incurfjourf
    January 5, 2012
    12:09 am
     

    DFZVIERFAUVNVbzzhpdudv uggs boots outlet SJAJRMZLPNSXPitsblocfp http://peternorthcott.com

29 Trackbacks/Pingbacks

  1. [...] out the rest of the article here, or the source files for the proof-of-concept here. Submit this page to other blogs: These icons [...]

  2. [...] これを回避する方法が下記にありました。 Fixed positioning in Mobile Safari [...]

  3. [...] I understand that with the zoomy nature of Mobile Safari, fixed positioning just really work. However, what if it were made to work only when zooming is disabled? That should give web developers the option to make better looking web apps without requiring elaborate workarounds. [...]

  4. [...] all the great webkit CSS and JavaScript features that are available for Mobile Safari. There are a number of limitations though (at least as of OS 2.2) that were very frustrating and surprising. In the end, [...]

  5. [...] n Fixed positioning in Mobile Safari | Doctyper [...]

  6. [...] http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ [...]

  7. [...] i forward you this intresting article – i tried it myself, felt a bit slowbut its working [link] [...]

  8. [...] doctyper [...]

  9. [...] Link: Fixed positioning in Mobile Safari | Doctyper [...]

  10. [...] is explained well by Richard Herrera on his blog @ Doctyper: Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it [...]

  11. [...] Positioning / Context (Referred by Sherif [...]

  12. [...] solution alternative existe cependant ce script très intéressant que j’ai déniché et qui émule les actions de navigation en javascript. Toutefois ce [...]

  13. [...] part of the interface I designed, and on my laptop, the page worked beautifully. As it turns out, there is a work-around, but I decided not to use it. While I was researching this issue, I had a little [...]

  14. [...] But if you must, Richard Herrera has a work around. [...]

  15. [...] fixed-positioning-on-mobile-safari [...]

  16. [...] won’t be working in Mobile Safari. Front-end developer Richard Herrera has mentioned at his blog that this happens [...]

  17. [...] UI framework, usually to emulate the feel of native apps (and to provide easier workarounds to lack of access to position:fixed). We’ve seen a few libraries released that emulate the iPhone UI, and in the future we might [...]

  18. [...] won’t be working in Mobile Safari. Front-end developer Richard Herrera has mentioned at his blog that this happens because:  Imagine a book in front of you. Take a piece of paper, cut a 320×416 [...]

  19. [...] 1.Technical Note TN2262: Preparing Your Web Content for iPad 2.How to create an iPad version of your site 3.iPad CSS Layout with landscape / portrait orientation modes 4.Fixed positioning in Mobile Safari [...]

  20. [...] Fixed positioning on mobile safari (???? ??? ???? + ???? ?????) [...]

  21. [...] Emulera position:fixed för mobile Safari AKPC_IDS += "2134,"; Var det här tillräckligt bra för att [...]

  22. [...] elements: position:fixed doesn’t work on mobile – he didn’t say why, so I had to look it up. Actually it works fine to fix an item to a specific position on the page, that’s just not [...]

  23. [...] this: http://old.doctyper.com/stuff/iphone/fixed/ Here is an explanation.  http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ It works on android [...]

  24. [...] http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ Tags: iPhone, Safari, webapp [...]

  25. [...] fixed-positioning-on-mobile-safari [...]

  26. [...] LinkedIn [...]

  27. [...] Quelle: http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ [...]

  28. [...] fixed-positioning-on-mobile-safari [...]

  29. [...] fixed ??????Doctyper http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ Imagine a book in front of [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*