“Cross-browser compatibility” is a term for a reason; different browsers act differently in both styling and function. Starting out I had in my mind that Internet Explorer was the pain in the neck, but once you get to version 10 that’s not true. Here are a few things I’ve run across where one browser (or OS, in one case) does things differently – annoyingly so – from everyone else.
1. Firefox and ordered lists
We wanted numbered list elements with block-displayed links inside, as the Q of an FAQ. The calculation of 100% width for the block element in FF didn’t allow room for the item numbers – unlike in Safari, Chrome, and IE/Edge – so we had unwanted line breaks. There was no cross-browser-compatible way to reduce the width, say, and still get the clean look we wanted (with expansion carets aligned at the right end of each line). Ultimately we took off the built-in numbers and added our own to the links as pseudoelements. Silly.
2. iOS Safari and click handlers
This one I am surprised I did not learn about earlier. Anything that is not natively clickable (buttons and links) cannot be made clickable (tappable) in Safari on iOS without shenanigans. I read a number of things that talked about it being an event bubbling problem, but attaching the handler directly to the element involved didn’t fix anything; neither did setting cursor: pointer; in the CSS, another trick I read about. Ultimately I had to add onclick="void(0)" as an attribute to the elements I wanted clickable.
3. Windows and font height
This one’s not browser-based – you can use Chrome on different OSes and get different results. Windows and Mac don’t approach font height the same way, and unless the vertical metrics of your font cause the calculations to agree, vertical alignment across browsers may be impossible without JavaScript. The JavaScript in question is adding a class based on the User Agent:
var usrAgt = window.navigator.userAgent;
if (usrAgt.indexOf("Windows") > -1) {
// add a class to style on Windows differently from Mac, Android, iOS
}
Android and iOS seem to vertically align things in agreement with Mac. I was a sad panda to have to do OS sniffing, but boy was it ugly without.
4. Safari and animation trailers
Safari still has a nice CSS animation repainting bug that was supposedly fixed several versions ago – it may leave a little trail of the back edge of your moving element. Setting outline: 1px solid transparent; on the moving element will force repainting to happen on a broad-enough area to fix that.
5. Actually Safari, you’re kind of a pain
Positioning defaults for Safari are apparently different from other browsers; if you absolutely position an item you’d better explicitly relatively position its container. Inline-block items are not necessarily in line with their predecessors on the line, either – I had an inline-block element after a block element (that didn’t fill the width of the container), and the inline-block’s top was aligned to the block’s bottom until I set vertical-align: top; on it. No positioning or alignment changes were necessary to make things show up correctly in other browsers.
Photo by Luzap via Pizabay.