Am I just going crazy, or does background-attachment:fixed; really not work in the native Android browser?
I already implemented a simple fix by using two divs instead of one... The first div is positioned absolutely and contains the fixed background image, the other div goes on top of it and contains the scrolling content.
The issue with this fix (aside from the unnecessary complication) is that for some reason, when I am scrolling the content over the background image div, the background image disappears altogether! :(
Has anyone else found a workaround that isn't buggy, or how exactly are we supposed to work with this?
With native browser scrolling you cannot do that. It's a bug in the default Andriod browser. To implement a fixed element at the top or the bottom you have to apply position: fixed on it and then implement a custom scrolling on the other element which contains the content to scroll.
I used this Library for this kind of problems:
http://cubiq.org/iscroll-4
You can find examples on its page.
Related
i have a webapp i'm trying to make responsive and i'm running into a problem on my Android 5.2 phone where when i click the input, it shows the keyboard and the form gets pushed down i think, leaving this ugly white area at the bottom whenever the keyboard is shown.
I'm using 100vh on the element that contains the background image, could that be what's causing the problem?
I'll link an image of the issue below taken from my mobile phone.
Has anyone run into this issue before? how did you fix it?
Use this for small screen devices :
body{
-webkit-box-sizing:border-box;
box-sizing:border-box;}
Rookie mistake, you must shouldn't use vh for heights, just let the content define the height and if necessary define min-heights, vh messes it up on Mobile whenever you scroll down.
I am using a ListView with a WebView every 30 items for special HTML ads (animated) which are provided from a WebServer. This normally works okay. But sometimes it seems to draw the content of the WebView twice as seen in the screenshot below. The WebView continues animating but the misplaced (left bottom) drawing stays the same. When one interacts with the screen (scrolls) the wrongly drawn space disappears.
Now my questions are:
Why is this happening?
How can I prevent this from happening?
My current guess for Nr. 1 is: Somehow the WebView gets positioned in the left bottom just for a quick time where it as well draws. Then it gets positioned correctly but the ListView does not redraw that area because it thinks all is still at the same position.
Thanks to anyone who can help.
UPDATE:
I used the same WebView with the animation centered in a RelativeLayout. The same problem occurred there. So the problem is not in the ListView.
WebViews don't go well with ListViews, you may have to do a lot of hacks, including handling touch events, etc.
If you list doesn't display an 'infinite' list of items, or at least the list is never too big, you can maybe give a try on this custom listview from this other post: https://stackoverflow.com/a/21878703/684582
it was designed to support a ListView inside a ScrollView, but it might just help you on your problem without much redesign. I hope it helps! Good luck!
I found the problem in the WebView coming from the advertiser. The problem seems to be setting the LayerType to HARDWARE. That caused the Problem. Setting the the LayerType to NONE or SOFTWARE the problem went away. Now I just wonder WHY that caused the problem.
A normal WebView uses LAYER_TYPE_NONE by default.
Solution in short:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
I have been searching for a solution to this and have been striking out.
I have a JQM/Phonegap app that has a search bar in a Fixed position header. OnKeyup, it hits my API and returns results in a listview that is dynamically created and refreshed.
What my issue is, is that although it looks fine in Chrome when I am testing it, once I build it in phonegap and test on the phone, when you click in the search bar, there's an overlay on the box. Once you scroll through the results, this overlay moves both up and down, depending on your scroll.
I can provide code, but it's really only showing when I build it and test on Android. (4.0.4)
I have tried adding data-tap-toggle="false" to the header and moving the search bar down to the "content" area and changing it to a data-filter="true" UL, with both options, I still get the "bouncing" search input.
Any other thoughts? I've attached an example of how it's looking on the Android.
I finally found an answer for this. Not what I wanted, but here it is.
How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?
Another solution I found was to implement iscrollview https://github.com/watusi/jquery-mobile-iscrollview iscrollview is basically a library that integrates iscroll and jquery and it does all the nasty lifting for you.
After implementing this, the "bouncing" of the search box went away. YAY
I have an issue on my phone running Android 4.0.4.
I have an iframe with a text field and a couple of dropdowns, but the iframe is too wide to fit in the phone window when in portrait mode, so I get a horizontal scroll bar so I can scroll to see all of the fields.
The problem is, if I scroll the iframe to the right I can no longer select the text box or the dropdowns.
It looks like the device doesn't realise the iframe has been scrolled to the right, so for example, when the iframe first renders, the content is positioned left aligned. At this moment, one of the dropdowns is visible at the far right of the iframe. If I scroll the iframe all the way to the right and tap the screen where the dropdown used to be, I get the selection screen for the drop down even though the area of the screen I actually clicked had no element on it at all.
If I tap the screen where the dropdown actually is, I get no response at all.
I have a test page here:
http://snow.x10.mx/damian/page.html
Everything works fine on Firefox on the desktop, so it looks like it may be just an Android bug.
Can anybody suggest a workaround for it (other than making sure the iframe isn't wider than the screen) because I can't see an Android fix coming any time soon!
If anyone has an iPhone they can test it with, can you let me know if you have the same problem?
I've run into the same issue with Android 4.0.4
The same thing happens with vertical scrolling, and applies to input fields, links... Anything that should react to a touch/click event. If the element is visible before scrolling the position where it was is still reacting to the touch event after scrolling. And if it's not visible before scrolling there is nothing you can do to interact with that element.
I'm not sure what's causing this, but using a scrollbar plugin ( jScrollPane ) has solved it for me.
Good luck!
When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.
I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.
This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}
Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.