Posted by Roger

Browsers are not all the same and they are not always consistent in the way they display a web page. A page that displays OK on Firefox, may not look the same on Chrome and the layout may not be what is expected - or vice versa. Also different versions of the same browser may show the same page in slightly different ways. A page in Chrome 85 on an Android phone, may not show in the same way as the same page in Chrome 85 on an iPad, for instance.

It's annoying, but it's a fact of life and always has been for as long as browsers have been around. The differences from one browser to another aren't usually that large but they may be enough to disrupt how a page is laid out or how it works. There are usually a few changes we can make to the code to fix any problems so that everything ends up looking good.

The value of testing

Because of these inconsistencies, we always test new websites (and changes to existing sites) thoroughly before they go live and make any necessary changes, so we can be sure that, whatever device a visitors choses to use, the site will work correctly. There are more details about our testing arrangements on our Website development and website testing page

A surprising result

Recently, when testing a full re-implementation of this website, something unusual happened.

We expected that paragraphs of text would display alongside an image as in the screenshot below.

Text alongside an image, working correctly

What we got was rather different. See the screen shot below.

Text alongside image showing bug in Chrome 87 and Edge 87

The first line was alongside the image, then there was a large gap before the remaining text displayed below the image.

Similar behaviour occurred on other pages. We were testing on the latest version of Chrome (version 87 at the time of writing) and we tried several ways to fix the problem but we could not get the text to display alongside the image. We then tried with Firefox, Opera and Safari and everything displayed as it should in those browsers even in several different versions.

We then tried earlier versions of Chrome and, to our surprise, everything was fine! The problem ONLY happened in Chrome 87 and Microsoft Edge 87 (both have the same underlying browser software).

Explanation

The only explanation for this was that we were seeing a browser bug, i.e. a fault in the latest versions of Chrome and Edge so we raised this issue with the Edge team who confirmed that it was, indeed, a bug. Reassuringly, this was picked up quickly and a solution found. At present, it's not certain that the fix will go into the next version of Chrome and Edge or not, but if not the next version (version 88), certainly the following one. We do, however, have a work-around for the problem which prevents large gaps occurring when text is placed alongside images.

Conclusion

This is a first for us - we've never discovered a browser bug before. However, we have certainly come across plenty of browser inconsistencies in our time, which is why we will always test new and changed sites to make sure they work well and display properly on all devices. Only by doing this can our clients be assured that their website will work properly across different browsers, different versions of those browsers and with different devices, operating systems etc.


More from the blog

ClientMailer, Email marketing specialists Oxford

Mobile responsive websites

ClientMailer now have a modern and professional website which properly reflects the products and services that they offer to their customers. The site looks good and works well on all device types and, importantly, it loads quickly. Peter Davey and his colleagues at ClientMailer are very pleased with the new site and they full expect that it will help them win more business in the future.

Read more

How to Write Good Blog Posts

Writing good blog posts

I’ve been asked a couple of times recently about how to write good blog posts so I thought I would pull together some thoughts about this important topic. With so many blog posts available it is worth putting in some effort to ensure your posts are good quality as so many blog posts are poorly written. Yet, with some thought, a little planning and following some basic rules you can lift your posts above the noise and provide content that is worthwhile and easy to read and share.

Read more