본문 바로가기

Story/html/css

모바일에서 fixed style 지원여부

반응형

position

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
static, relative, and absolute Yes Yes Yes Yes Yes Yes Yes
  • WebKit browsers have a minor bug; see page.
position: fixed basic support
Does the browser try to create a fixed layer at all, or is it just an absolutely positioned layer?
Yes No Yes No Yes Yes No Yes Yes No Yes No Yes

Browsers that don’t support fixed treat it the same as absolute.

A Yes here says nothing about implementation quality; only that the browser made an effort.

position of fixed layer
Should be coordinates relative to the visual viewport
Incomplete - Yes - Layout Yes Vertical - bottom weird Yes - Yes - Buggy Yes
  • Safari keeps the layers in position at low zoom levels, but starts to move the fixed layers at a certain point; though always slower than the actual scroll. On the iPhone iOS6 the point is around 400% zoom; on the iPad iOS5 it’s around 100% zoom. I don’t know if this is a difference between iOS 5 and 6 or between iPad and iPhone.
  • Opera Mobile mostly positions the layers relative to the layout viewport, but sometimes jumps to another horizontal position. Never to another vertical position, though.
  • On BlackBerry the vertical position is correct, while the horizontal one is relative to the layout viewport.
  • Symbian correctly positions the first layer (top/left: 50px), but I don’t understand the placement of the second layer.
  • IE10 scrolls the top-placed layer with the page when scrolling up, and the bottom-placed one when scrolling down. When scrolling the other way they more-or-less stay in the correct position.

 

 

출처 http://www.quirksmode.org/css/css2/mobile.html

반응형