I recently found a topic from the /r/web_design subreddit discussing font rendering differences across different browsers. A reddit user had posted a Google+ support page which had some font differences. But I noticed some even more critical differences between Google Chrome and Internet Explorer.
Here’s a sample of the web page in Google Chrome:
Apart from missing anti-aliasing on the fonts, everything seems to be correct. However, the web page looks totally different in all popular versions of Internet Explorer. Here are results of the same web page tested in different browsers using our Browserbite app. Click on the image to see the full report:
The “missing images problem” is not limited to this specific web page – other Google+ support pages have the same problem on all versions of Internet Explorer.
An even bigger issue than IE users not seeing images on Google+ support pages is that the maintainers of the support pages have seemingly not done cross browser testing. These problems can be avoided by using cross browser testing. Unless Google is deliberately discriminating against Internet Explorer users? Google+ has 500 million registered users and, according to StatCounter and Wikipedia IE has 28.56% market share among desktop browsers. This means a large number of users are influenced.
How to fix the hidden image issue in Internet Explorer?
I decided to look for the origin of the defect and try to offer my help to Google in solving this issue. Here’s a relevant snippet of HTML from the Google+ support page:
As you can see, the height of the image is defined as “auto”. The fix is quite simple: remove the height-attribute, or replace it with a pixel-based value, as “auto” is not a valid value in the HTML5 specification, which Google+ support pages are using.
Of course we have forwarded this bug to Google+ team and we hope they will fix this bug shortly.