Why does a rect require width and height attribute in Firefox?

Question

In the following example I created a blinking eyes animation using CSS and an SVG: http://codepen.io/JamesTheHacker/pen/oLZVrY

It works fine in chrome, but on Firefox th

Answer 1

You have already an excellent answer indicating what the problem is

You can solve it this way

* { box-sizing: border-box; }
body { background-color: rgb(0, 184, 234); }

svg {
  display: block;
  margin: 90px auto;
  width: 380px;
  height: 130px;
}

/*
 * Keyframes for blink animation
 */
@keyframes blink {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0); }
  80% { transform: scaleY(1); }
}

.eye {
  height: 20px;
  width: 20px;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform-origin: center 315px;
}