Enable real fixed positioning on Samsung Android browsers

android css webkit css-position samsung-mobile

24,889

Solution 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/

Solution 2

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;
}

24,889

Mr. Shiny and New 安宇

I'm a software developer. Lately I work in PHP on Magento 2. Previously I worked in J2EE, SQL, HTML, JavaScript and CSS. My free time is spent raising a daughter and a son and indoctrinating them in the cult of Lego.

Updated on June 21, 2020

Comments

Mr. Shiny and New 安宇 almost 4 years
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.
- deefour almost 12 years
  
  Do you have a reference for "The Android browser, since 2.2, supports fixed positioning" ?
- Mr. Shiny and New 安宇 almost 12 years
  
  @Deefour The Android emulator in the SDK confirms it, as I mentioned in my post.
- deefour almost 12 years
  
  caniuse says < 3.0 has only partial support, and the referenced article 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.
- Mr. Shiny and New 安宇 almost 12 years
  
  @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.
- MusikAnimal almost 12 years
  
  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? Probably already seen this, but another answer recommended modifying the viewport.
- Mr. Shiny and New 安宇 almost 12 years
  
  @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.
- Dylan almost 12 years
  
  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.
- Mr. Shiny and New 安宇 almost 12 years
  
  @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.
- Dane Balia almost 12 years
  
  There is quite a nice write out about fixed positioning in the Mobile Area, that should explain your problem, and provide possible solutions. 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. gregjopa.com/2011/07/conditional-fixed-positioning-with-jque‌ry Hope you get some luck!
- Mr. Shiny and New 安宇 almost 12 years
  
  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.
- Dane Balia almost 12 years
  
  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. github.com/jquery/jquery-mobile/issues/3712.
- George Katsanos over 11 years
  
  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.
- Mr. Shiny and New 安宇 over 11 years
  
  @GeorgeKatsanos The Atrix 4G shipped with 2.2
Mr. Shiny and New 安宇 almost 12 years

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 安宇 over 11 years

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.
George Katsanos over 11 years

I edited my post to add some facts just to get things straight on some stuff.
Mr. Shiny and New 安宇 over 11 years

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 安宇 over 11 years

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.
George Katsanos over 11 years

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.
Mr. Shiny and New 安宇 over 11 years

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.