Major head scratcher happening today. I developed a Cake app, hosted on Pagoda Box, that runs fine on all browsers except Android native browser on the Galaxy S3. It displays a white screen:
http://broomage.pagodabox.com/sweepstakes/MetsMoments2013
However, I uploaded this app to a standard LAMP server so I could debug it more quickly, and it showed up just fine! See here:
http://epi.qa/broomage/sweepstakes/MetsMoments2013
I'm really mystified at this point, since it now seems specific to Pagoda Box. I've checked the apache/php/cake logs and nothing weird is showing up. I can also "view source" and see that everything seems to be loading properly--only the browser just shows a white screen. This problem also happens on certain sites that use the Bootstrap library, but will sometimes show up if you go to another URL then hit the back button. But this particular site just shows a white screen on the S3 no matter what I do. Any ideas???
Grrr, I think I narrowed it down to a gzip issue: If you are serving certain assets thru a php script, the size may be reported as a mismatch w/ the compressed size, which screws up rendering on lackluster browsers like that of android.
Related
Maybe there is a bug in android that is driving me crazy. Let me explain:
I created a page as part of a site I'm working on (http://parishes.rcda.org:81/allSaints_New) and it is displaying fine on the desktop. I am able to resize the browser window horizontally and everything positions properly. On the mobile browser in android, it is only occupying the left 3rd of the window with a horizontal scrollbar. The phone is a Samsung Galaxy S10 running the chrome browser. The phone has all the latest updates.
I'm using Dreamweaver and created a new page. I called it AboutUs2.php. I copied the page contents from AboutUS.php to AboutUs2.php. I then uploaded it to my windows web server and it looked fine. I then renamed it AboutUs.php in order to replace the page that is not working properly. After uploading it, it now wants to display in the left 3rd of the screen.
I asked a colleague with an iphone to check the page and it works just fine. I did try remote debugging via chrome and the developer tools do not show any issues with the page. I'm wondering if this is maybe a bug in android as another android phone gives me the same results with a horizontal scrollbar.
any ideas what is causing this?
I've built an html5-video webpage that uses video-js and its chromecast-plugin. When I use the resulting cast button on video-js player's control-bar, when running on Chrome-browser on Android, it fails to completely transfer over to the TV's screen. The failing symptom is that only a large blue cast-icon is visible in the center of the TV screen. It fails on Android, each and every time I try it. (My Android is version 7.1.1, on a Google Nexus-9 tablet.)
And when it fails to completely cast over to the TV, the cast-icon-button on the video-js control-bar turns red, which I assume means that the chromecast-plugin 'knows' that it failed. (The videojs-chromecast-plugin is version 2.0.8)
My chromecast device is a 2nd-generation chromecast-dongle from Google.
[ From a PC-platform, the video-js chromecast-plugin's cast-button works perfectly every time. That PC-platform is Windows-10, using the newest version of Chrome browser (Version 63.0.3239.132 (Official Build) (64-bit)) ]
So, could someone with Android and a chromecast device please test my
webpage and report whether it works or whether they too fail with a large
blue cast-icon image in center of their TV-screen.
(Note: I've googled for symptom of the blue cast-icon in center of TV, and
find various reports of this exact symptom, on various platforms. But
none of those problem posts ever end with a solution, so I've concluded
that this is a known open issue.)
My webpage that is failing is located here:
https://weasel.firmfriends.us/HTMLVideoFromCloud/
[ You can see the page's html and javascript via "view page source"
in the browser (right-click anywhere on the page, outside of the
video-js viewer) ]
(EDIT#1) Ok, some extra clarification: The problem casting from Android happens ONLY when I use the cast-button at right-end of videojs-viewer's control bar.
But, I have found an alternative cast-button on Android, that CAN successfully cast my page to the TV. I don't recall exactly what I did to get this extra button to start appearing, but it will appear for a few seconds in the upper-left client-area of the video-js player window rendering my webpage. This 'workaround' doesn't completely solve my issue, because the goal is to get videojs-chromecast-plugin's cast-button to work. Also, other people viewing the page from Android may not know how to get that alternate cast-button.
(EDIT#2) I've tested now from two different tablets...both fail.
(1) Android version 7.1.1, on a Google Nexus-9 tablet
(2) Android version 5.1.1, on a Google Nexus-10 tablet
TIA...
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 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.