![]() If there's a focusable element inside the position fixed element, i.e. The page used was: /3/ixewok/6/ ( edit) Focus jumping zoomed), the position fixed element drifts upwards (I've seen this drift entirely out of view before in other sites): If the page is zoomed at all, which you can get in iOS when the user rotates from portrait to landscape, as the user scrolls in any scale beyond 1 (i.e. This is a problem if you want to monitor the page position to simulate effects like the bumping and shunting of category headings like you might see in the address book app. You'll notice that the values don't change until the scroll has finished. ![]() I'm monitoring the window.scrollTop and window.pageYOffset (and another value which we'll look at later). The sharp eyed viewer might have spotted some values changing in the video. The page used was: /3/ixewok/6/ ( edit) No updated values on scroll Note that this is the simulator running, but I've also captured the real iPhone (using Reflection) showing the same behaviour. If you add position:fixed in any normal way as you might on a "desktop" site, you'll see some degree of juddering as the page scrolls. I've created a number of example pages that you can view for yourself, which are used in the following videos. However, there's an increasing number of iOS apps I've noticed that are actually just a collection of WebViews (mini-MobileSafaris) with fixed position toolbars as seen in Apple's own AppStore app, the native Facebook app and Instagram below: ![]() I might have argued that fixed positioned doesn't matter or isn't really required in a good app. Update: I've added "scrolling = unusable position:fixed element" based on Corey Duston pointing out more bugs with position fixed. ![]()
0 Comments
Leave a Reply. |