I was able to inspect and interact with (update css) on my android devices using chrome's device inspector then a week or so ago it stopped working. I can still see and interact with devices somewhat, but the styles pane never changes to reflect the element I have selected, and selecting elements is more difficult. Use to be a single click, now its a double click and even that doesn't always work - and when it does finally work, the styles pane still doesn't display the attributes of the element I've just selected, just stays at the root of the document from when page initially loaded - so I can't edit DOM properties as I was able to do.
I've deleted Canary and re-installed, but still have this issue. Has anyone seen this before and found a solution?
Related
When using Android Screen Reader to navigate a webpage on Chrome, elements that are aria-hidden do not work correctly if the aria-hidden value changes during the lifespan of the page.
For example, if the value of aria-hidden changes from false to true, the element will still be in the accessibility order.
Sidenote: Sometimes, after looping through the now aria-hidden element once, it will correctly hide the next time through. This is how I was able to conclude that this issue is with Chrome specifically.
These changes however, are respected correctly using Samsung Browser on Samsung devices.
Through experimentation, I found that setting the element's display to none briefly and then reverting the change causes the new value of aria-hidden to be respected. This leads me to believe that Chrome might be performing some kind of micro-optimization where it ignores aria-hidden changes. However, this is visually inconvenient since the user will notice the flicker as the element is hidden and re-displayed. Does anyone know of a better way to resolve this?
Here is a stackblitz if anyone wants to see it in action:
https://stackblitz.com/edit/aria-hidden-test
After 3 seconds, the outlined boxes will be aria-hidden.
Simply navigate to the webpage on chrome on android and turn voiceover on (Use default settings).
While developing an app wich uses phonegap, angular touch and jquery we stumble in this bug on some android devices.
When touch and move over an non scrollable object the screen goes blank.
When scrooling the body the screen comes back to life.
All the elements stays in dom and still firing events and so.
When using developer tools we still can see the elements.
http://youtu.be/NdTerKi08WE
Has any one saw this bug before?
EDIT
Im using phongegap build so i dont have access to java files.
This problem is only on Android 5 phones.
EDIT 2
Same problem on device chrome browser so its probably not an phone gap problem.
The problem was an issue regard to rtl in the new chromium.
The workaround is to add the "rtl" to css on document ready.
I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.
Anyone have any other suggestions where to look?
Is there any way to disable this native select picker?
WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.
I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.
Note: I cannot replicate the issue in either on a mobile or desktop browser.
To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.
Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.
UPDATE: see comments below for a better solution.
We have a Web application that dynamically builds elements via JS. We are testing for mobile usability and are finding that on devices that run 2.3.x versions of Android, our select element behavior is a little strange. A touch on the select element will bring up the usual radio button list of the options and touching an option will select it and return to the page view. However, the option shown in the select box does not update. It still shows the top element in the option list. When the page is reloaded, the behavior is normal. I have tried adding an additional empty element at the top of the list and setting it as selected when the element is built, which seems to clear up the issue on some devices, but our QA tester is saying that behavior remains on others.
Any ideas?
If you're fishing for areas to look into, I had a similar issue for select elements when using the fastclick library in any Android 2.3.x browser. The issue was caused by a hack in fastclick for it to work better under Android Chrome. The fix for native browsers hasn't been merged to this day (https://github.com/ftlabs/fastclick/pull/190).
On another note Android 2.x can be a nightmare in unexpected places once you start adding an assortment of everyday things - CSS animations, opacity, negative margins outside the screen etc
I am trying to develop an android application. I've put a scroll view as main container using graphical layout in eclipse. After that, I had put some UI elements, like buttons. When the total height of elements become more than viewable area, it can be seen using scroll view as expected. There is no problem until this point. The problem is the elements that are not fit viewable are of the screen can not be seen using graphical container of the eclipse interface. There is no problem with the source code, as it runs expectedly. Is there any option in the Eclipse gui to see the UI elements that are not fit the viewport?
I know what you're talking about. When you're viewing the xml file on the Eclipse Graphical layout you can only see the elements that fit on the screen. You can't scroll down to see the entire UI.
I use Eclipse at home and work. I'm using Eclipse Helios Service Release 1, on both systems. For some reason at home, when I'm on the graphical layout, there's a button on the upper right of the graphical viewer that says something like 'Remove Clipping'. (I'm at work now. So can't look to see exactly what it says).
When I click that button, I can now scroll down to see the entire UI. However, on my copy of Eclipse at work that same button isn't displayed. I've tried to figure out what the difference is between the setup on the two copies of Eclipse. But so far haven't been able to figure it out. Note, I've tried viewing the same exact xml file, within the same project, on both copies of Eclipse.
The problem seems to only occur when you're using a scrollview and all the ui elements won't fit on the graphical layout screen within Eclipse.
I have the same problem. I've been unable to troubleshoot, so I've resorted to using my physical device instead. I try to get the bulk of work done within the the Eclipse GUI... then nudge and polish with my device. Its a PITA to be sure, uploading what seems like a million times only to move one element a tiny bit more.
Best practices recommend developing on a device. Further, the Layout-tools && scrollView basically make it mandatory to really know what is going on. I can't seem to form this into a coherent search argument as my Google-fu has let me down on this one.
BTW - I'm using the shiny new r10 ADT plugin and I've been struggling with this for about 6 months.
Another workaround: You can use a smaller-ish tablet port in the GUI to get a really rough idea of what you are working with.
If your target layout is for a phone or smaller device, simply switch the preview to a larger screen size configuration.
In the upper left corner, under where it says 'Editing config: ~default', The list provides you with a number of screen sizes to target. Pick the 10.1 in version, and it will scale the preview, and will then allow you to see and work with all of the views that have scrolled off the screen.
Cheers-
I think this is an old topic but I was having the same issue. I have 2 apps made from outsourcing. when I opened each in eclipse one would show the full contents of the scrollview and one was clipped off. After numerous google searches nothing came up as a solution. I just happen to look and saw the app that is clipped was android version 1.6 and the app that shows everything like i wanted it to so I can use the graphical layout for a scrollview was android verion 2.1.
So i changed the one app to version 2.1 and it fixed it. noone seemed to address that. so for me the fix was make sure the android version you are building for is 2.1. you can always change it back to 1.6 compatable after you are done designing.
Hope this helps
The best way i could figure out is to give negetive top margin to the root layout that will make the rest of the content visible. This is only for dev purpose and should be removed when completed