There's only one word: "UGH"

I am working on a project using custom svg elements as part of a map on a sign-up form.

To make sign up easier on mobile, I wanted to "deconstruct" the map elements into a more mobile-friendly layout. When I finished it, I found this weird quirk:

You can apply a transform on an element within a media query, it works great when you resize the browser, but load the page in a small viewport and the transforms won't apply at all.

(Although, other styles applied to the svg like stroke and fill attributes will…)

Here's a CodePen I put together. Shrink the browser below and the the transforms will fire and the colors will change. Expand the browser and the colors will reset (at the 600px media query) but the elements won't re-animate.

The solution is to use Javascript's .matchMedia() method to re-add the mobile classes. This is is a limited version of what I used:

if (window.matchMedia("(max-width: 768px)").matches) {
  var circles = document.querySelectorAll('circle');

  for (i = 0; i < divs.length; i++) {
    circles[i].setAttribute('class', 'mobile');
  }
}

See my whole CodePen below.

See the Pen weird svg demo by Donald Wasserman (@donaldwasserman) on CodePen.