Search code examples
htmlcssfirefoxsvgfirefox-quantum

SVG path drawing truncated in Firefox

I have used a pure css and svg toggle switch checkbox taken from here and =it worked perfectly on all browsers, until my Firefox was updated to the new Firefox Quantum (version 57.0), in which half of the switch was not drawn. My vectoring skills are admittedly low, I don't know Firefox Quantum well enough and I have no idea what's went wrong with it.
Any help would be highly appreciated.

this is how it looks on Chrome and Explorer
enter image description here

and this is on Firefox Quantum
enter image description here

Looks like in Firefox Quantum the path that is being drawn is

<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281'></path>

instead of the full path, which is

<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>

Looks like the browser ignored a big part of the path.
here is codepen and here is the full code:
html:

<div class='checkbox'>
  <label class='checkbox__container'>
    <input class='checkbox__toggle' type='checkbox'>
    <span class='checkbox__checker'></span>
    <span class='checkbox__txt-left'>On</span>
    <span class='checkbox__txt-right'>Off</span>
    <svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
      <path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
    </svg>
  </label>
</div>

scss:

.ext-cross{
  &:before, &:after{
    content:"";
    display: block;
    position: absolute;
    width: 14px;
    height: 2px;
    margin: 0 auto;
    top: 20px;
    left: 0;
    right: 0;
    background-color: #bf1e1e;
    border-radius: 5px;
    transition-duration: .3s;
  }
  &:before{
    transform: rotateZ(45deg);
  }
  &:after{
    transform: rotateZ(-45deg);
  }
}
.ext-ok{
  &:before, &:after{
    background-color: #0cb018;
  }
  &:before{
    width: 6px;
    top: 23px;
    left: -7px;
  }
  &:after{
    width: 12px;
    left: 5px;
  }
}

//checkbox
.checkbox{
  width: 100px;
  margin: 0 auto 30px auto;
  &__container{
    display: block;
    position: relative;
    height: 42px;
    cursor: pointer;
  }
  &__toggle{
    display: none;
    &:checked + .checkbox__checker{
      left: calc(100% - 43px);
      transform: rotateZ(360deg);
      
      @extend .ext-ok;
    }
  }
  &__checker, &__cross, &__ok{
    display: block;
    position: absolute;
    height: 43px;
    width: 43px;
    top: -1px;
    left: 0px;
    z-index: 1;
    @extend .ext-cross;
  }
  &__checker{
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 2px 6px rgba(0,0,0,.5);
    transition: .3s;
     z-index: 2;
    &:before, &:after{
      transition-duration: .3s;
    }
  }
  
  &__cross, &__ok{
    &:before, &:after{
      background-color: #ddd;
    }
  }
  &__ok{
    @extend .ext-ok;
    left: calc(100% - 43px);
  }
  
  &__txt-left, &__txt-right{
    display: block;
    position: absolute;
    width: 42px;
    top: 15px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    z-index: 1;
  }
  &__txt-right{
    right: 0px;
  }
  &__bg{
    position: absolute;
    top: 0;
    left: 0;
    fill: #aaa;
    width: 100%;
    height: 100%;
  }
}

UPDATE
It was not tested on older version of Firefox, that was a mistake.

Solution

  • According to the SVG specification, commas are only valid if a number is either side of them so

    12.281,S3

    is invalid and the path rendering terminates at the point of invalidity. Remove the invalid comma and the S command will be rendered too.

    All versions of Firefox have behaved like this, it's not new with Quantum. If it renders in other browsers, it's those other browers that are buggy, not Firefox.