Strange behavior with stock browsers on Android 4.0+

[cdubks88]

To preface my post, I am not a web developer by any stretch. I have done a little css many years ago and picked it back up after quite a gap. I’ve learning the platform we use (.net) and reworked our site design with new css.

We’re happy for the most part with the end result on the desktop, but I’m trying to get mobile version worked out. I know I’ve seen so many posts and exhaustive work done to get it right. I took on this project to get us moving forward and honestly don’t know where to start looking for a solution to this problem as I’m not sure if it’s relative to something in Android or in the code.

I have some test pages built based on our current design but pointing at the new test style sheets for mobile, and every time I preview the test page(s) in the stock browser on Android devices running 4.0+, I get a lot of garbage. It almost looks like the page gets rendered twice by the browser as if there are two layers offset from each other slightly once loaded.

I’ve looked at it on the Galaxy S3 (two different ones on different carriers), Galaxy Nexus, an original Galaxy and I’m not sure of the exact model of Motorola, but it’s running Android 4.0.

The thing that’s strange is I downloaded Firefox on one of the S3’s and tested it. The test pages rendered perfectly as I expect to see them.

It also renders as I expected in other browsers running on older phones using Android 2.2 and 2.3 as well as iphones (except the 3g model – at least that’s what I’ve been able to test so far).

The test site pages also render properly on tablets I’ve tried (tested on Kindle Fire, ipad2, ipad,droid).

I’d appreciate any suggestions as to where to start to nail down the issue.

Here’s an example of one of the test pages:
http://www.campfire.org/cfPrograms-test.aspx

Thanks in advance for your help.

C.

[tomrogers123]

Like you, I feel the need to preface my post:

I do not have an Android device to test on right now so my observations are simply based on looking at your markup and CSS in a desktop browser and some things I’ve noticed that are strange in the code as a result of that exploration. Given that the site is functioning fine everywhere else, these might not be the reason for the inconsistencies you reported. I’ve been in some situations before where the way I solved it seamed to have no relevance to the actual issue. Even if my suggestions don’t end up resolving the weirdness, they are breeches of standards and might come back to bight you if you don’t fix them!

1. Correct me if I’m wrong but all your content looks to be wrapped in `

` tags. Forms in HTML are intended to can elements that a user “fills in” (textbboxes, select lists, checkboxes etc) and general content should not really be inside them. My thought that this could be the route of the problems you’re overtly seeing stems from the fact that mobile devices often treat forms specially due to differences in input devices.

2. There is an instance where you’re using the same attribute twice on the same element:

`

Our Programs

`

You can give an element multiple classes but they should just be separated with a space:

`

Our Programs

`

3. You have an unneeded closing `` on line 249.

Again, something in there may or may not be the cause of your plight but they would be good things to sort either way.

Good luck, I’d be intrigued to hear what happens!

[Author]

Posts