I am noticing strange blue markings when I visit certain webpages on Samsung galaxy note 10.1 is running android 4.1.2. This is only happening on one website and not the other. I have attached screenshots of both. I think it could be due to certain CSS or JS. Not sure what is is. Please help.
http://i.stack.imgur.com/rxPFO.png
http://i.stack.imgur.com/25cNO.png
It looks like you may have an advertising blocker running. Could there be a banner add that should be showing where those blue images are?
Related
I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.
If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.
Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.
Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.
More pertinent observations and facts:
Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.
The icons do not start to replace one another until we've changed pages a couple times.
It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.
This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).
I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.
We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.
If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.
We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.
Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.
I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.
While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.
What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.
I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
I have an HTML page which is displayed correctly in all devices and all browser except the stock Android browser in Xperia Z.
On this particular device running Android 4.2.2, I am using jQuery v1.7.2, and using $('div').slideUp and $('div').slideDown methods only, and it results in text distortion (it is in English, so I suppose it is not related to any specific font), the text appears as horizontal lines as they would appear for a fraction of a second while sliding up/ down.
I have tried turning the debug mode ON by about:debug in the stock browser, and the javascript console shows no error/ warning messages.
I tried changing the user agent string to iPhone, and to my surprise, the text is rendered as expected.
I have searched for similar issue, and came across Android stock browser crashing, it points to jQuery bug where slideUp/ slideDown have problems in Android stock browser (please note that jQuery and Android versions are different in the reported bug).
My questions are:
Is this a known issue?
Has anyone faced similar problem before?
Is there a workaround to resolve it?
I'd really appreciate if anyone could point me in the right direction.
Using jSignature (https://github.com/willowsystems/jSignature) within a PhoneGap, JQuery Mobile application.
When trying to sign in the content div using the Samsung Galaxy S4 the drawn line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? It has been working on other devices such as Samsung Galaxy S3, iPhone, and iPad.
<script>
var signatureContentDiv = $("#signatureContentDiv");
signatureContentDiv.html("");
signatureContentDiv.jSignature();
</script>
<div id="signatureContentDiv"></div>
I have also just run into this. For me, the error appears on the Galaxy Note 2.0 while running Chrome. I tried changing to Firefox and it works properly. The same behavior is noted when trying the demo directly on jSignatures site. I would suggest checking against their site and seeing if your device works properly to eliminate your code being the issue.
Hopefully this will get fixed.
Additional Info: I have just determined that it seems to be based on the dimensions of the image. Anything over 66,000 pixels (such as 600x110) will cause the failure. This still seems to only happen on certain devices, all running the same version of Chrome.
Interesting that I wind up responding to the last thread I answered about this issue almost 2 years ago.
It seems the most recent update to Chrome on Android (V 43.0.2357.78) causes new failures to jSignature. If the page is in it's native size (no browser zooming), it works properly. If you zoom the screen, it fails. This is new behavior (on existing code). Other browsers seem to work properly.
Hi have a problem running my software on the samsung galaxy tab.
Sometimes (but not always!) areas that are rendered transparent look garbled. I have attached an image showing a screen capture done on the device, which looks perfect for a strange reason, and a photo that shows the garbled half transpaent black box.
Has somebody an explanation for this effect or can somebody point me in a direction - I really don't know where I should start searching since the same software runs flawless on a galaxy s2 and on all IOS devices.
Perhaps somebody here has seen somthing similar and knows reasons that might lead to artifacts like these.
screenshot vs photo http://www.applab.at/img/garbage_samsung_tab7.png
The problem seems to be the device itself.
Sometimes if you turn the device on, you see a garbled screen befoer the samsung logo appears. Then this effect shows whenever running the software.
If the device boots without a garbled screen, everything is fine.