Android 2.2/2.3’s Native Browser and Fixed Positioning #3

Open
Wilto opened this Issue Mar 23, 2012 · 7 comments

Projects

None yet

7 participants

@Wilto
Collaborator
Wilto commented Mar 23, 2012

Android 2.2/2.3’s implementation of position: fixed; can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues—particularly in the case of position: absolute elements inside of position: fixed elements. These bizarre issues include—but are not limited to—the following:

  • Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an empty absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause entire pages to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.
  • The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but only when that image is using something other than its inherent dimensions. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50x50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.
  • When a position: fixed element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only translate transforms seem uneffected by this. Even more oddly, this issue is solved by setting a CSS opacity of .9 or below on the parent of the fixed element.
  • Combinations position: fixed and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.
  • Any element that triggers the on-screen keyboard, when placed inside a position: fixed element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.
@djgish485

Just wanted to say thanks. The 2nd bullet was spot-on for an issue in our Phonegap app, and allowed us to craft a work around. What a crazy Android bug...

@shad0w77
shad0w77 commented Nov 7, 2012

wow... had a fixed header w/ a blank absolute span in it. that made my select menu's clickable area to get out offset when the user scrolled down a bit. Added a " " to the span in the fixed header and everything started working. Four hours down the drain for a " ".... thanks google.

@fxalvarezd

Hey guys, hope you have a solution for my problem.
I have two divs inside the body tag, one has a position absolute, the other one a position fixed. The absolute div is an overlay that opens between the content and a header(like a lightbox). The problem is that the fixed element makes my overlay open on top of everything. (this only happens in the native android browser, not in chrome or safari)

<body>
<div class="ad-container fixed-ad">
    <div class="ad-wrapper">
        <div style="display:inline-block;font:bold 14px/50px Arial;background:#dcdcdc;color:#000;text-align:center;width:320px;">AD</div>
    </div>
</div>

<div class="menu-overlay"></div>
</body>

.ad-container{
background:#3F3F3F;
width:100%;
z-index:30;
}

.js .fixed-ad{
background:transparent;
bottom:0;
margin:0 0 -1px 0;
right:0;
position:fixed;
}

.menu-overlay{
background:#000;
bottom:0;
display:none;
left:0;
opacity: 0.8;
position:absolute;
top:0;
width:100%;
z-index:40;
}

BUG:
buggy

EXPECTED:
expected

@arschmitz arschmitz referenced this issue in jquery/jquery-mobile May 24, 2013
Closed

Popup with select over popup button on android #6034

@ghost
ghost commented Jul 2, 2013

I ran into a similar issue tonight. I modified the bootstrap.css file to change the following rule. I commented out the position:relative which seems to have fixed the issue

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
/position: relative;/
margin-bottom: 0;
*margin-left: 0;
vertical-align: top;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

@OTBConsulting

Hi. Need some help.
I am developing a Phonegap application. The application has a few position property fixed in CSS which are templates/images. The same is working perfectly for Kitkat and Lollipop. The same thing is a disaster in Jelly bean. The images over lap, the fixed position is moves into non aligned position.

Is there a way we can manage this problem without much of coding. This is actually holding the release. Would really appreciate a response.

@toddparker
Collaborator

We always put fixed positioning behind a feature test because it's so buggy, maybe give this a try: https://github.com/filamentgroup/fixed-fixed

@AvexMedia AvexMedia referenced this issue in lukehaas/css-loaders Aug 12, 2016
Open

Don't seem to work on Android 2.3 #17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment