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.

The Mozilla Bugzilla issues have a WebCompat priority flag from P1 to P3 following a triage process.

Summary

Current Popular Issues

(This needs to be adjusted @@karl 2020-10-20)

• 1089326 button with a href inside
• 866102 -webkit-line-clamp
• 390936 CSS zoom

Bugzilla WebCompat Core Bug

Full Query

ID	Summary	Priority	Status
91370	Implement setting cssText on various CSSRule implementations	P3	NEW
102695	[EVENTTARG]Treat some transparent elements as "transparent to events"	P3	NEW
129432	'onkeypress', 'onkeydown', onkeyup' not working on FORM,LEGEND,OPTGROUP,OPTION	--	NEW
137687	Computed CSSDeclarations need to implement GetCssText	P3	NEW
406488	Copy highlighted text to clipboard ignores non-inlined CSS styling when pasting as rich text (to HTML editors, MS Word, Excel, Outlook etc.)	--	NEW
662496	autofocus not work when the element is added to the DOM after the document is done loading (e.g. in window.onload)	--	NEW
695868	Unable to set document.body.innerHTML of IFrame	P3	NEW
997189	Absolutely positioned inline-block (or inline) element with floating nextSibling and auto "left" is positioned to the right of the float	--	NEW
1034018	outline: auto is not applied in the same way as it is on blink	P3	NEW
1039871	Add support to HTML media element for determining the mimetype of a loaded media file	--	NEW
1043118	Do not select leading/trailing spaces on double clicking.	P3	NEW
1199665	Consider making <input type=number> always fall back to parsing numbers as English formatted numbers if parsing them as numbers formatted using the user's locale fails	--	ASSIGNED
1248570	Firefox can't play wav in video or audio element	P3	NEW
1273010	Blocky and slow rendering on Firefox Android Nightly - filter: drop-shadow()	P3	ASSIGNED
1274354	[meta] Date.parse, amirite	P3	NEW
1307024	[Perf] [google docs] Firefox will get 3~9% faster when running gdoc test cases with chrome user agent	--	NEW
1307678	Title of latest recommendation of language.chinadaily.com.cn is cut	P3	NEW
1322694	WebGL video textures fail to render in Firefox Nightly for MP4 format with 2048x1024 pixels dimensions	P3	UNCONFIRMED
1336245	Geolocation should return available low-res location when high-res location is not yet available	P2	NEW
1337114	Diacritics rendered incorrectly with decomposed unicode and Proxima Nova	P3	NEW
1353248	[e10s] select - options styling doesn't work properly if CSS selector :-moz-focusring is present	P3	NEW
1360238	window.getSelection().toString() displays extra "\n" characters on multiple block elements, even if they are display:inline	P3	NEW
1362499	Support unit-less values for CSS -webkit-perspective (for interop)	P3	NEW
1362898	content with ::before gets painted at the wrong place	--	NEW
1376369	-moz-user-select:none triggers dragging also when @draggable="false"	P3	NEW
1382471	Firefox wraps word-broken text under a previous float-left, rather than starting it on the same line.	P3	NEW
1385382	bullet with text-align:center is positioned further to the right in Firefox, as compared to other browsers (breaking fake radio button at wetter.7pass.de)	P3	NEW
1385419	Parent element stretches to submit input's line-height, rather than its also-specified height.	P3	NEW
1411862	Disable 3rd party cookie video does not play in Firefox Dev Edition (v57 with uBlockO).	P3	NEW
1414402	Support playback of mp4v video	P5	NEW
1417753	Implement -moz-appearance: searchfield-cancel-button which behave like -webkit-appearance: searchfield-cancel-button	P3	NEW
1421597	Provide an option to ignore scroll events outside of the control when a |select| drop-down is open	P3	NEW
1422891	Support mkv|matroska|video/x-matroska in Firefox	P3	NEW
1436801	Vertical border and padding influences alignment of text in spans with "vertical-align:middle" (only in Firefox)	P3	NEW
1437761	position:sticky inside partially-offscreen position:fixed container has a different behavior in Chrome/Edge vs Firefox	P3	NEW
1438398	After opening then closing the Account panel (top-right blue-ish icon), the page doesn't reflow correctly.	P3	NEW
1443284	percentage height in auto-height table cell in fixed-height table is treated as auto	P3	NEW
1449079	PNG background-image icon not positioned at the right place after first rendering	P3	NEW
1450815	HTTP POST receives a response with a onload event in JS posting to itself and generating an infinite loop	P3	NEW
1451998	the thumbnails all play automatically at the same time, and the website gets so slow it's impossible to use.	P3	NEW
1452646	while clicking and navigating back, an outline is drawn	P3	NEW
1453797	Carousel images have jagged edges when scrolling through	P3	NEW
1454043	Carousel images have jagged edges when scrolling through	P3	NEW
1455545	Noto Sans Symbols is not rendered on some Android devices	P3	NEW
1459535	Performance is incredibly degraded when idle on Foreignpolicy.com	P3	NEW
1461266	comments framerate is smoother on Chrome than Firefox	P3	NEW
1463335	anchor and input superposed makes the JavaScript non active.	P3	NEW
1464925	Visual glitch: graphic layers around menu displaced, linked to scroll position.	P3	NEW
1467114	BBC - highlighter for navigation spans extends to body edge	P3	NEW
1471232	iframe content overflow spontaneously after a couple of seconds	P2	REOPENED
1473501	Improve the way Gecko selects images based on srcset values (don't just round up, when rounding up is a huge jump)	P3	NEW
1475681	Page CSP can break seeking to unbuffered position (in mp3 playback)	P3	REOPENED
1475723	Geckoview and Fennec open select dropdown on tap of parent label; other browsers do not.	P3	NEW
1476051	Interop issues with select element styling with appearance:none.	P3	NEW
1477110	Select elements seem to get double the text-indent	P3	NEW
1481132	[Android] businessinsider.com flashes 3 times when you reload or navigate away	P3	NEW
1481581	[meta] More closely align the behavior of '-moz-appearance' with Chrome's '-webkit-appearance'	P3	NEW
1481596	Make `-moz-appearance: none` on <textarea> behave more like Chrome	P3	NEW
1486365	The City selection page slightly bounces after opening	P3	NEW
1490873	Toggling SVG graph elements on and off leaves artifacts and erases parts.	P3	NEW
1491743	invalid CSS property value on ::selection kills the default selection settings	P3	NEW
1493434	Inconsistent table column sizing between Firefox and Chrome (with percent sizes on colgroup and col)	P3	NEW
1499986	Handling javascript URL returning a non-string value	P3	NEW
1501480	mask-image and SVG on input element fails in Firefox, Safari, and Edge, works in Chrome	P3	NEW
1503427	Firefox 63 pushing Bootstrap 3 date input text down	P3	NEW
1503899	Sharp printer UI incorrectly rendered, due to table-layout behavior difference (& with CSS enabled by webkit-min-device-pixel-ratio query)	P3	NEW
1506487	m.acfun.cn - video not playing, OS needs to be restarted.	P3	NEW
1513435	Incompatible column layout with 'height:0' and definite 'column-width'	P3	UNCONFIRMED
1514269	[CSS Multicol] Firefox only web platform tests	P2	NEW
1514362	[CSS Selectors] Firefox only web platform test failures	P3	NEW
1514371	[CSSOM] Firefox only web platform test failures	P2	NEW
1517666	quick zoom in and out will white out Firefox and all tabs	P3	NEW
1518040	SVG feBlend should take account of flood-opacity on feFlood input nodes	P3	NEW
1522706	History.pushState limit may be too low for some live sites	P3	NEW
1523231	Screen problems not everything is there	P3	NEW
1529471	objectBoundingBox, clip-path behave differently in Chrome and Firefox	P3	NEW
1530577	(Un)Expected HTTPS upgrade of download due to <meta ... "upgrade-insecure-requests"> tag	P3	NEW
1532481	Firefox does not expand certain list items so they do not vertically overlap, as other engines do.	P3	NEW
1541330	Speech Synthesis play incorrect	P3	NEW
1542995	Thousands of window.onload events creates high memory/CPU until it crashes	P3	NEW
1543059	Loading spinner displays at end of some non-looping videos hosted on reddit.com	P3	NEW
1545703	images.google.com - Some videos do not play or play erratically	P3	NEW
1548376	Flickering videos when scrolling on Buzzfeed	P3	NEW
1550158	Blink and Gecko differ on where to flow absolutely-positioned element in a tight layout	P4	UNCONFIRMED
1577904	Interop differences in iframe html/body offsetHeights as reported by Chrome and Firefox	--	NEW
1656279	Unitless line height interop issue	--	NEW

86 Total; 86 Open (100%); 0 Resolved (0%); 0 Verified (0%);

FIXED

This is the Yeah! Let's party list.

• ALMOST THERE 218415 window.event. It created issues with CharCode and KeyCode which have been just fixed.
• ALMOST THERE 1123938 virtual viewport
• FIXED 1391430 Animated GIFs render incorrectly on Android
• FIXED 1368555 Implement -webkit-appearance. There are secondary issues about it.
• FIXED 1392147 Clear Sans and Roboto fonts disparities break layouts
• FIXED 1352238 Native theme for form controls on Firefox Android
• FIXED 1294490 WebP Image support
• FIXED 752790 Input padding covers text when the padding is greater than (TextHeight - InputHeight)/2
• FIXED 1357674 CSS color for placeholder text

WebKit Flexbox Total Armaggedon in China and Japan

This is not specific to Desktop and Mobile, but more to the specific markets of China and Japan and indeed more often on mobile.

Suggested Fix Use Web standards flexbox properties in addition to the WebKit ones if old devices compatibility is required.

Related Bugs

• https://webcompat.com/issues?page=1&per_page=50&state=open&stage=all&sort=created&direction=desc&q=%22country%3A+jp%22

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.

Related Bugs

• https://webcompat.com/issues/1889
• https://webcompat.com/issues/2453

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.

Related Bugs

• https://bugzilla.mozilla.org/show_bug.cgi?id=823483

Video streaming using Apple’s proprietary HTTP Live Streaming

Firefox doesn’t support this on Desktop or Mobile.

Suggested Fix Not a trivial thing to fix. Ensure that there is a fallback mechanism for browsers that don’t support HLS (currently on Desktop, only Edge and Safari do).

Related Bugs

• https://bugzilla.mozilla.org/show_bug.cgi?id=941351

Meta viewport fixed size

Very similar to the max-width bug. This is a different of behavior in between blink and Gecko. Basically with a fix width, Gecko on Mobile doesn’t necessary resize the page to fit in the screen.

Suggested Fix Use width=device-width instead of fixed size.

Related Bugs

• https://bugzilla.mozilla.org/show_bug.cgi?id=617034

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.

Related Bugs

• https://bugzilla.mozilla.org/show_bug.cgi?id=1267084

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”

Suggested Fix Use web standards and pass in an explicit event object into your event handlers. For example: a.addEventListener(‘click’, function(e){ blah(e)});

Related Bugs

• https://bugzilla.mozilla.org/show_bug.cgi?id=804710
• https://github.com/webcompat/web-bugs/issues/2392#issuecomment-208477618

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.

Related Bugs

• https://webcompat.com/issues/1961
• https://webcompat.com/issues/797
• https://bugzilla.mozilla.org/show_bug.cgi?id=931849

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).

Related Bugs

• https://github.com/webcompat/web-bugs/issues/2767
• https://github.com/webcompat/web-bugs/issues/4423
• https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%20%5Bwebkit-scrollbar%5D&list_id=13411089
• https://github.com/whatwg/compat/issues/61