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);
}
Related
I am posting and answering my own question because this issue took me days and days to figure out, and finally I did some half-baked kludge, and then months later I found the actual answer, and I want to spare others that.
Problem: to get iOS text entry elements to scroll up and stay visible when a keyboard appears, in Xamarin Forms the easiest way is to use a ScrollView, BUT for some reason any time you use a ScrollView the dang thing resizes its content so that some of it is slightly off screen.
Content not inside ScrollView:
Content inside ScrollView:
As you can see, for some darn reason the ScrollView has its own opinion about how to lay out its contents, and that opinion is that some of it should always be off-screen.
What the heck? I've tried changing layouts and using different kinds of nesting views and adjusting layout options and margins and everything I could think of. The dang layout just always changes without me telling it to!
How do I make it behave?
ScrollView has an Orientation setting to determine the directions it can scroll. You can set it to Neither right there in the XAML, and all your content will be back where it should be.
Note that if you actually want scrolling behavior, this will mess that up. But if you're only using a ScrollView to get its nice behavior around keyboards appearing and disappearing, as I usually am, that shouldn't matter.
I have a ScrollView with 20 WebViews inside (yes, I know it's heavy but right now it's the best solution I've found). The WebViews are used to display forum posts.
I'm getting a very weird behavior on my Nexus 4 (it doesn't happen on some other devices I've tested) which is driving me crazy.
I have the first post visible and just a little bit of the second one visible. Now I want to scroll and instead of starting scrolling by putting the finger in the first post I put the finger on the portion of the second post that is visible. The WebView of that second post immediately jumps to the bottom which is a very annoying behavior while scrolling.
If you feel appropriate I can record a video of this behavior and upload to YouTube or you can search for AndroidPIT in the Play Store and check the behavior yourself in the Forum section. I won't post the link to the Play Store to avoid being called a spammer.
Thanks in advance.
From comment: "Have you tried setting your webview to non focusable and non clickable as it appears as it's trying to display the entire content of the item you are pressing on as you scroll"
Apparently View#setFocusable (view.setFocusable(false)) worked.
Make sure that the scrolling is handled by the scrollview in stead of the webview. I believe setting the Webview.canscrollvertically to false might fix the problem, let me know if it helped.
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.
The problem appears in Android 2.2. It seems cool because it can auto-hide.But I don't like it quite much because the bar is an indicator for "Whether there is more content not present on the widget". Hiding it maybe neat, but may get the users wrong sometimes. In ListView, I find it a fatal bug at all. When there is more content to show, no scrollbar present, AND when wipe the screen down-wards, no scroolbar appears. Only when use the traceball or Dpad to move focus, there appears the scrollbar. BUT THERE IS WORSE: when you wipe down-wards to move the scrollbar down, nothing happens! The touch feature is almost disabled here.
Can anyone help me here? Thanks!
Maybe answers there will help you
Android ListView that does not scroll?
I had a listview inside of a scrollview. After I'd commented scrollview it was possible to use listview's scrolling.
The weird thing is, that this problem occurs only on Android 2.2.
I am using a listView in android 2.2 and it works just fine . The vertical scrolling happens implicitly without the inclusion of a scroll view . Hope your ListView id is #android:id/list.
And a small correction , to move down the list , you need to wipe the screen UPWARDS not DOWNWARDS ....