Compatibility/CommonIssues

Web Compatibility issues change over time. Bugs that were common in 2005 are not often seen in the present. This list represents the most common issues currently being discovered by the webcompat community and will be updated as these change in the future.

Click-or-touch

Many sites have code that detects touch support and assumes mouse input can be ignored. These sites behave oddly on all computers that have a touch screen AND a mouse - usually not responding as expected to mouse input.

Suggested Fix
Write JavaScript that will handle both click and touch input, not either-or.

Max-width

(Fixed in Gecko)
Basically an image with a max-width: 100% was bigger than the viewport
It was an issue, created by a different behavior in Gecko and Blink. But the market share of Blink imposed the unspecc’ed behavior of Blink.

Suggested Fix
The fix was often a combination of display: table with table-layout: fixed.
This is now fixed in Gecko and the spec, but this is a good illustration point in terms of Web Compatbility issues.

Faulty UA detection

Sites sniff the user agent string, often to figure out if you’re using a “supported browser”. This goes wrong all the time, because of an unknown UA string, or parsing bugs, or not understanding versions greater than 9, etc. Mobile browsers will frequently end up on “Desktop” sites, rather than mobile ones as a result of this kind of bug.

Suggested Fix
Update your UA detection library or framework, or use feature detection rather than relying on User Agent string parsing. User Agent detection is about detecting the past. So it will obviously fail. Feature detection is about inspecting the now.

Relying on global event object

WebKit (possibly copied from old iE?) has a non-standard global event object. When sites don’t pass in the event object to an event handler, we end up with exceptions like “ReferenceError: event is not defined”

HTTP Ping Pong

The company has two different sites: desktop and mobile with different domain names. They do user-agent sniffing be with HTTP user-agent header, through JavaScript.

Suggested Fix
The issue starts to fix itself by people switching to responsive Web sites.
The fix is actually simple. Which ever technique you are using should have a consistent policy in terms of user agent sniffing.
Some websites make mistakes when the detection mechanism is not the same on both domains: for example one with HTTP, and one with JS. In HTTP only, the browser is able to identify the infinite loop and will stop after 10 iterations, but when switching from HTTP to JS and then to HTTP, etc the browser is really caught forever.

Webkit Scrollbar

Websites would like to replace default scrollbars with custom ones. There are known issue of Firefox not hiding the default scrollbar and potential scrollbar lagging introduced with async scrolling (e10s-only).