25

The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.

This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.

Is there a way to make the Samsung Android "stock" browser use real fixed positioning?

I've tested: 1. Samsung Galaxy 551, Android 2.2 2. Samsung Galaxy S, Android 2.3 3. Samsung Galaxy S II, Android 2.3

Sample code:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height"> 
    <style>
    h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
    p { margin-top: 36px; }
    </style>
  </head>
  <body>
    <h1>Header</h1>
    <p>Long text goes here</p>
  </body>
</html>

The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.

Edit Judging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.

Mr. Shiny and New 安宇
  • 13,822
  • 6
  • 44
  • 64
  • Do you have a reference for "The Android browser, since 2.2, supports fixed positioning" ? – deefour Jul 09 '12 at 14:47
  • @Deefour The Android emulator in the SDK confirms it, as I mentioned in my post. – Mr. Shiny and New 安宇 Jul 09 '12 at 15:01
  • [caniuse](http://caniuse.com/css-fixed) says < 3.0 has only partial support, and the [referenced article](http://bradfrostweb.com/blog/mobile/fixed-position/) says "Android 2.2 awkwardly snaps fixed elements back into position once scrolling is complete.". Just looking for something that confirms what you see in your SDK is the expected behavior, as it seems at least with the Galaxy 551 (the one with 2.2) you're experiencing the exact behavior the referenced article above describes. – deefour Jul 09 '12 at 15:49
  • @Deefour I have tested on other Android 2.2 devices such as the Motorola Atrix 4G and it works as I expect. And the WebView component provided by Android on the very same Samsung phones also works properly; presumably it has not been modified the way the browser has. – Mr. Shiny and New 安宇 Jul 09 '12 at 16:29
  • I had the same exact problem when developing an app using WebView. For me, it failed to work on two HTC devices and a Motorola. So I'm convinced it's probably not Samsung-specific. Have you tried a Javascript solution such as [iScroll](http://cubiq.org/iscroll-4)? Probably already seen this, but another answer recommended [modifying the viewport](http://stackoverflow.com/questions/2784889/android-web-app-positionfixed-broken). – MusikAnimal Jul 10 '12 at 02:21
  • @MusikAnimal: iScroll's fake fixed-position solution gives the same result as Samsung's broken fixed-position solution. And the WebView works perfectly on the same phones, so it's really puzzling. – Mr. Shiny and New 安宇 Jul 10 '12 at 12:04
  • I ran into this problem with iOS Safari too. I think it's the way devices handle the scroll event. The user isn't scrolling the browser, they're scrolling the viewport. So the answer will involve tinkering with the viewport meta tag. – Dylan Jul 10 '12 at 16:05
  • @Dylan The viewport meta tag is already set so that they are not scrolling the viewport but actually the document. And it works just fine on the stock Android simulator and the Samsung Android WebView. Just not the browser. – Mr. Shiny and New 安宇 Jul 10 '12 at 18:17
  • There is quite a nice write out about fixed positioning in the Mobile Area, that should explain your problem, and provide possible solutions. http://bradfrostweb.com/blog/mobile/fixed-position/ Sorry don't have an answer for ya from own experience, can't add another comment, but here is a link that might help in Conditional Fixed Positioning and Removing with jQuery. http://www.gregjopa.com/2011/07/conditional-fixed-positioning-with-jquery/ Hope you get some luck! – Dane Balia Jul 11 '12 at 11:13
  • That page doesn't mention Samsung browsers and also incorrectly attributes the broken Samsung behaviour to all Android 2.2 browsers, when in fact the stock 2.2 behaviour does work properly like the 2.3 behaviour. – Mr. Shiny and New 安宇 Jul 11 '12 at 11:46
  • Seems other people are having similar problems as you with the "select" and "fixed tool bars". They discuss ways to hack around this, not sure if in there you might find something. https://github.com/jquery/jquery-mobile/issues/3712. – Dane Balia Jul 12 '12 at 05:03
  • According to caniuse 2.2 and 2.3 have PARTIAL and not full support so it seems that there have been bugs reported. The Motorola Atrix 4g you are comparing at is a 2.3 and not a 2.2 phone. Last but not least a simulator is never the same as a native browser, just like all browser emulators. If the support is broken, it's broken. If you don't want to use a JS shim then there is no other answer to your question. – George Katsanos Oct 09 '12 at 14:46
  • @GeorgeKatsanos The [Atrix 4G shipped with 2.2](http://www.motorola.com/Support/US-EN/Android_Products/ATRIX-4G_Software_Update_Page) – Mr. Shiny and New 安宇 Oct 09 '12 at 16:04

4 Answers4

1

Maybe you could consider a different approach that doesn't require fixed positioning...

Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.

h1 {
   height: 20px;
}

p {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}
Anita Foley
  • 11
  • 1
  • 2
    That might work. However, I've heard that the scrolling performance is much slower when scrolling part of the document instead of the whole document. Anyway, I'm using jQuery Mobile so I don't have much flexibility on the document structure. – Mr. Shiny and New 安宇 Aug 08 '12 at 17:59
1

I think the best way for android 2.2 browser implement javascript.

You can find more info via this link. It is about fixed positioning in all mobile browsers.

http://bradfrostweb.com/blog/mobile/fixed-position/

Daniel Ta
  • 416
  • 3
  • 7
0

In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:

http://bradfrostweb.com/blog/mobile/fixed-position/

emik
  • 903
  • 12
  • 11
-1

It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support. In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.

To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.

Otherwise, you can use http://cubiq.org/iscroll-4 which emulates it.

(edit: some facts)

  1. According to http://caniuse.com/#search=position:fixed Android 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
  2. An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
  3. Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab )

You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.

The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.

George Katsanos
  • 13,524
  • 16
  • 62
  • 98
  • Wrong. I have it working in Stock Android 2.2 on the emulator and on the Motorola Atrix 4G. And working in Android 2.3 on the Nexus S and the Android emulator. It only fails on phones that have Samsung modifications. – Mr. Shiny and New 安宇 Oct 09 '12 at 14:13
  • I edited my post to add some facts just to get things straight on some stuff. – George Katsanos Oct 09 '12 at 14:37
  • You can deny that the Atrix 4G has 2.3, but I am holding it in my hand and it is clearly 2.2. Also, the Android emulator is running the Stock android browser. It is not some kind of simulator: it emulates the whole machine including the processor. It is the real hardware. caniuse.com is a great source of documentation but the actual Android code is the real documentation. Google ships it in working form, but on every SAMSUNG phone (i.e. one running TouchWiz) it is broken. I don't know why you are arguing with my experimental results. – Mr. Shiny and New 安宇 Oct 09 '12 at 16:00
  • BTW you would not believe the number of bugs Samsung has introduced into Android 2.2/2.3 with their customizations. There are so many flaws and usability issues with, eg, the Samsung-added keyboards; flaws that just go away when you switch to the stock Android keyboard. Flaws in the Samsung-modified browser that don't exist on Stock android. I have several actual devices and can compare them and it's clear that there are bugs on Samsung devices that don't exist on vanilla Android. I have a Galaxy S and a Nexus S both on 2.3: the hw is almost identical but the Samsung one is filled with bugs. – Mr. Shiny and New 安宇 Oct 09 '12 at 16:16
  • If you are sure of the root of the problem, I don't understand the point of your question. What are you expecting for? There's no magic what will fix Samsung's problems I guess. – George Katsanos Oct 10 '12 at 05:51
  • just because I understand how a problem arose doesn't mean I know how to fix it. I was hoping that someone might have an answer but it seems as if the whole internet has mistaken Samsung for Android and assumed that the Samsung "stock" browser is actually what Google shipped. In a sense it hardly matters since they are the number one vendor. Well, hopefully the switch to Chrome as the default will solve this problem in five years or so. – Mr. Shiny and New 安宇 Oct 11 '12 at 19:17