SVG filter quirks

SVG can't he hidden using display:none on Firefox:

To fix, make it visually hidden without changing the display mode.

The posterize effect looks drastically different across FF, Chrome and Safari.

In Safari, SVG filter values don't update until the DOM is redrawn

This applies to SVG filters referenced in CSS. You could even remove the SVG element and things would still work (Possibly related WebKit bug.)

To fix: don't rely on CSS selectors to toggle filter values. Instead, specify the filters inline in style then toggle them via JS.

Want to receive my work as I publish it? Subscribe here.

a giant foot-shaped snail with a house on its back. the house is still in construction, with a big crane towering above it The image is a stylized black-and-white illustration. In the lower left corner, there is a small, cozy-looking house with smoke rising from its chimney. The smoke, however, does not dissipate into the air but instead forms a dark, looming cloud. Within the cloud, the silhouette of a large, menacing face is visible, with its eyes and nose peeking through the darkness. The creature, perhaps a cat, appears to be watching over the house ominously, creating a sense of foreboding or unease.