Visual bugs are a hot topic nowadays. Humans are visual creatures, the best way to feed data to your users is to make it visually appealing. However large amounts of plain text might hurt readability or scare people away due to the sheer amount of information you are trying to feed them. Moreover you need to get your message through, people need to know about your services and products. This is why presenting the data in easy to understand style is very important.
We can be achieve this through images, fancy fonts, layouts and good choice of styling. Often times however this leads to unwanted side effects, like misalignments, cropped images and other visual bugs.
In this article we will try to outline the most common visual bugs we see around the internet.

Layout

Most often layout issues are caused by device resolution. It is pretty challenging to make elements align properly on all devices. This is why we have libraries like bootstrap to help us.
Here are some of the most common layout visual bugs.

  • Overlapping content or auto overflow.
  • Cropped images or elements not showing. Usually because there is no space left on the page
  • Spacing. Too big or too small margin or padding.
Monitor with page layout. Common visual bugs are related mostly to layouts

Browser compatibility

These bugs are probably the oldest issues. Not long ago there were no standards on how to write HTML/CSS pages and every browser rendered the page in different way or used different versions of JavaScript. Fortunately standards came along in the form of ECMA script specification also the official HTML specification. This brought some order in to the chaos, but often times we still see things working in some browsers differently.
Some of the more common bugs are.

  • Video not playing. Browsers can be very picky on what resource to load
  • Using browser specific features in your page. And hope the rest of the browsers will also comply
  • Compatibility issues with old version of browsers. I am looking at you Internet Explorer!
  • Autofill issues. It is even harder to disable autofill.
  • Using flash. Still using Flash? Good luck having proper user experience in chrome
Chrome no longer supports flash

Text size and font

Rendering the text similarly in all resolutions is quite tricky indeed, some of the most common side effects include:

  • Text size issues. Usually text size is relevant to the resolutions. Developers often leave bugs there.
  • Font not rendering properly on certain device. Things can get messy when you have mobile users.
  • Developers not using the correct font family

Colors

Colors are usually the root cause of most common visual bugs. Some examples are:

  • Inconsistent colors through out the website
  • Hover effect and opacity issues
  • Bright text on white background or dark text on dark background. There are very strict guidelines on choosing the right text highlight
  • Too bright colors might drive off people with light sensitivity conditions (photophobia)
CSS colors hexagram

Common visual bugs in Content

  • Typos. You should use spell checking tools before releasing a web page
  • Banners, popups that can’t be closed easily
  • Using the browser alerts. This is never a good idea.
  • Unrelated images
  • Images that won’t load. Always verify your page for missing assets.
  • Too many animations. Although animations are cool, but only the first time you see them.
  • Effects that get in the way. Do I really need to wait for this 3 sec curtain opening effect after each click? Make sure you set up the transition times properly.
opening curtains animation, common visual bug related to poorly configured slow animation

Page speed

This doesn’t sound like bug, but it can look like bug to the user in some cases.

  • Requests that take too long. Page might misbehave due to network issues and only parts of it might load or work
  • Huge images that take 2 minutes to render
  • Slow page initial render. The so called “First meaningful paint“. The page should display something meaningful no later than the 3rd second.
Google speed test image

Conclusion

Visual bugs are very hard to find and can cost your business a fortune. However writing tests to look for them can also be very expensive and would require technical skills. This is why we developed our service. It provides easy to use user interface for creating visual tests, to manage and monitor them. This way you can be sure that non of the above will happen to you and on low cost. You can read our post on how to get started with visual regression testing using our service.