Home » Android » javascript – Fixed positioning in Android 2.3 browser should work… shouldn't it?

javascript – Fixed positioning in Android 2.3 browser should work… shouldn't it?

Posted by: admin June 15, 2020 Leave a comment

Questions:

From looking around on the net, my understanding is that fixed positioning should work in Android 2.3 if one has the right meta tags set.

This is what my current viewport settings are.

    <meta name="viewport"
          content="width=device-width,
          height=device-height,
          initial-scale=1.0,
          maximum-scale=1.0,
          minimum-scale=1.0,
          user-scalable=no" /> 

On my Galaxy S2, the div with fixed position (basically it’s a thin header at the top of the page) does not stay in place when scrolling down the page. It moves with the page.

However, when you stop scrolling, it will jump to the top of the page again.

Is that the expected fixed position behaviour for Android 2.3?

Is there a better way to do this (which hopefully doesn’t involve the massive complexity of addiong iScroll)?

How to&Answers:

I’ve just been having a look into this issue myself as part of a project we are doing: the S2 does not appear to fully support position:fixed, instead it emulates it by snapping the object back in place once the scrolling is completed (which is how we are handling it, with JS, for handsets which do not support position:fixed).

I’ve no idea why this is, as all the other Android 2.3 devices we have tested do support it fully with no issues, but you’re not the only one having problems!

Answer:

Here is another thing that breaks position:fixed on Android 2.3

 anything{
      -webkit-transition:none !important;
 }

It only breaks when you use !important. Which sucks because

 anything{
      -webkit-transition:anything;
 }

Makes elements invisible. Hope this helps!

Answer:

There is an excellent comparison and discussion by Brad Frost of fixed positioning for Android, iOS, Firefox Mobile, Opera Mobile, Blackberry, Windows phone and more here.