Social media icons not rendering properly on Android browser

[sq2d]

Hello, I am looking for some help with the following rendering glitch. My client is offering their app for iOS, Android, Mac & Windows, so they need the site to render correctly on the various platforms. We have set-up the site so that the Facebook and Twitter social media icons appear in the top header and sticky menu when the device size allows for it. For some reason on an Android browser even on a tablet, the social media links are rendered as text links instead of as icons and out of position (on the upper left) and I can’t determine why. Other platforms and browsers appear to render the icons correctly.

I will attach a couple of screencaps provided by the client showing the glitch as well as the site URL in a follow-up private reply.

I would appreciate any suggestions or help in determining what is happening.

Regards,
Frank

[sq2d]

This reply has been marked as private.

[sq2d]

Hi, here is some clarification after further investigation and what I initially posted was inaccurate. When you first come to the site on a tablet with Android 4.0.x, the header is displayed correctly with the menu and social icons. However, once a visitor scrolls down the page, the sticky header completely disappears and in its place, the Facebook and Twitter text (which do not appear to be links) is displayed on the upper left and overlapping each other as seen from the prior posted screencaps.

This is happening because of a custom css that I have added in an attempt to change the behavior of the display of the social icons. By default with the AppDev theme on any browser, if a user enables the social icons, they display on the header when landing on the site, but are hidden on the sticky header once a user scrolls down the page. Our client wanted to have the social icons stay on the sticky header as a user scrolls down so that those social links are always available. To try to accommodate that, I added the following modified declaration to the Theme Options > Custom CSS to force the social-container to always display:

#header.sticky .social-container {display: block; top: 15px;}

This appeared to work on desktop/laptop screens and tablet-sized screens in landscape mode which was perfect until the reported issue with the client checking with tablets using Browser in Android 4.0.3. Disabling my custom style allows the sticky header to display correctly again. Are there any suggestions for a correct way to force the social icons to display with the sticky header?

Regards,
Frank

[Raghavendra]

This reply has been marked as private.

[Raghavendra]

Frank,

I did check the site on my Android phone as well as iPhone and saw no issues. Looks like this is specific to one or more versions of Android. And if the version is 4.0.3 as reported by you, I would not worry too much about it since it is really a very old version and most phones now have at least 4.1 installed and latest version is 4.3 is what I hear.

As far as your technique to place the social icons in the sticky header goes, I see nothing different here than what code you would use to populate the social icons in the top header. This is probably just a bug/glitch in the Android browser that we have to live with. Hard to support these legacy platforms. Hope this helps.

[sq2d]

Hi meteorite, thanks for the reply!

I agree it’s hard to support older platforms and it was just our luck that our client had a couple of those Android 4.0.3 devices. I had to work around the issue by removing the social icons from the sticky menu for mobile devices (setting max-device-width of 1280). I added the social icons to the footer and repeated the social icons for smartphone-sized devices within the page content to compensate.

Stange bug.

Regards,
Frank

[Raghavendra]

Thanks Frank for your understanding. Your strategy seems to our best bet right now.

[Author]

Posts