Device-Bugs
Device-Bugs copied to clipboard
scottjehl
Android 2.2/2.3’s Native Browser and Fixed Positioning
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: fixedelement appears anywhere on a page, most 2D CSS transforms will fail. Oddly, onlytranslatetransforms seem uneffected by this. Even more oddly, this issue is solved by setting a CSSopacityof .9 or below on the parent of the fixed element. - Combinations
position: fixedand 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: fixedelement, 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.
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...
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.
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:
EXPECTED:
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; }
See also this SO thread: http://stackoverflow.com/questions/12185282/android-2-3-browser-fails-to-render-some-css3-2d-transforms
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.
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
