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?
Related
When I test out my website (right here) in Mozilla FireFox OR in Google Chrome using their developer tools to simulate a mobile device, they both look just fine! See this image:
While the header is a bit too tall to my liking, at least I can scroll and view all of the "objects" on the page. However, when I try to go view the page on my Android Chrome browser itself, it looks completely different! See this image:
There's no "objects" onscreen, I can't scroll down, it's almost as if only the header exists on the page! I have no idea how this is happening, nor how to fix it. What am I missing here, and how do I get my page to look the same on a mobile device as it looks in Responsive Design Mode? Any assistance would be greatly appreciated. It's a Wordpress site under the hood, but I do have direct access to all of the files. I just don't know where to start!
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 am trying to use Remote Debugging Android Devices on chrome. But I can not resize my mobile screen fit to 100% or any on Chrome(PC).
On mobile it looks like
But on Chrome (PC) it looks like
Now the problem is : I can not either resize mobile screen on Chrome (PC) nor scroll to bottom (I can only scroll only if I can on mobile)
I tried by zoom in/out but it's not working. But I can see the remaining part by resizing window but I can not see on full size window.
I am using Chrome Version 50.0.2661.102 m on Windows 10 Pro(64bit), Android 5.1 on Moto G (1st Gen)
UPDATE : Now I have updated chrome to Version 51.0.2704.84 m But still same problem
Press ctrl++ several times it will resize automatically, I found this solution by chance:)
Looks like you found a bug. Please file an issue on the Chromium Issue Tracker so the team can triage the problem and address it.
I had the same problem debugging Ionic with Crosswalk, but I was able to resolve the issue by pressing Ctrl and scrolling down.
Unfortunately, this changes the size of the text—but at least you can see all of the mobile screen.
I will try to answer it in best possible way.
When you resize the Chrome in Desktop Screen, try to resize the screen from divider screen between remote device and elements sections. Also use the resize from top of the Chrome as well if needed.
You will find scrolling issue in Google website landing screen (as in your case).
Try another website and check.
Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
See here for technical issue. Android Remote Debugging Troubleshooting
Below are my observations for two tabs:
I have opened two different tabs in Chrome in my Android device.
Now in left side has active Google opened in tab 1 and in right side inactive StackOverFlow is there in tab 2.
In below screen, left side has inactive Google opened in tab 1 and in right side StackOverFlow is there in tab 2.
After scrolling StackOverFlow screen
Individually screens look like below :
Please let me know if any issue is there. I am using Android 5.1 on Moto E
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
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.