Every browser has a unique way of rendering a website. And not all your website visitors are using the same browser. Where does that bring us?
The list is actually very extensive and you can find it from the original source.
I have highlighted a property called CSS text-orientation in the above image to help you go through a use-case.
User Story: Chris has a Elderly Care website which follows the web design of vertical text orientation. Now, Chris happens to be using a Google Chrome 76 browser and is pretty pleased with how his overall website turned out to be. However, the demographics of the audience when inspected from Google Analytics or any other web inspector tool, showed that the majority of visitors are belonging to the age group of 40-60 years of age. Sadly, they are sticking on to IE11 or older versions.
Now, the content of the website’s home page is styled using CSS text-orientation which is incompatible across different browsers(as seen in the image above). Chris has been running the website from a year now, before realizing the cross browser compatibility issue. He is disappointed about failing to impress, or even convey the purpose of his website to all the people who visited the website from IE or even younger crowd who visited using the Edge browser.
Chris will now have to perform cross browser testing using LambdaTest, a cloud-based cross browser testing tool which offer 2000+ real browsers on cloud for ensuring his website free of UI bugs caused due to differences between various browser engines. Once the bugs were identified, Chris worked on rectifying them through fallbacks and is now happy with his website being able to serve audiences of all age groups coming from any web browser.
I hope that was clear to give you an idea of how crucial the task of cross browser testing can be. In the above use-case, we only took consideration of a single incompatible CSS property. Think about what would happen if your website is running with scores of similarly incompatible web elements?