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

The post Playing odd-browser-out appeared first on rweber.net.

More progress on the fishpond! The fish are slightly attracted to the mouse pointer when it’s inside the canvas, and you can click to feed them, which attracts them more. They also got a tiny upgrade in attractiveness. They’re still twitchy and awkward but I have various thoughts on how to improve that situation.

[Visit my blog to see the fish in action]

Code for this is on Github.

The post Feedable Fish appeared first on rweber.net.

I love aBowman’s fish gadget, but it’s Flash, which seems to be more restricted every year. Nowadays it won’t even run for longer than a minute or so without clicking a play button.

Recreating an interactive fishpond with HTML, CSS, and JavaScript seemed like an excellent way to learn the associated skills. I started with MDN’s JS/canvas Breakout tutorial and then made the ball more interesting, and then plural. Here’s what I have so far:

[Visit my blog to see the fish in action]

This came together amazingly fast, but I expect every additional improvement will take longer than the last – more natural movement and appearance in particular. It has been a highly enjoyable challenge so far, though.

You can monitor the progress and grab this and other code on my GitHub. I can’t improve on the MDN tutorial, so (for now at least) I’ll just be showing results.

The post Here fishy fishy appeared first on rweber.net.