SVG animation doesn't work well on Mozilla

Question

My svg interactive animation doesn't work well on Mozilla. It is completely destroyed though it looks good on Chrome, Opera, IE... Does anyone know what is the cause?

Edit: I've checked other similar issues but there was no solution for my problem. It is related to text and tspan.

$(document).ready(function() {
  $('#phase1').click(function() {
    $('.show_phase1').addClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase2').click(function() {
    $('.show_phase2').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase3').click(function() {
    $('.show_phase3').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase4').click(function() {
    $('.show_phase4').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase5').click(function() {
    $('.show_phase5').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
  })
})



$(document).ready(function() {
  // Hide the div
  $(".show_phase1").hide();
  // Show the div after 5s
  $(".show_phase1").delay(2000).fadeIn(100);
});

.arc-animation a {
  color: #28353d;
  font-size: 30px;
  text-transform: capitalize;
  font-weight: 300;
  font-family: 'Maven Pro', sans-serif;
}

.arc-animation p {
  color: #28353d;
  font-size: 18px;
  line-height: 1.5;
  width: 70%;
  text-align: center;
  word-wrap: break-word;
  margin: 0 auto;
  font-weight: 300;
  padding: 25px 0 60px;
}

.arc-animation {
  float: left;
  background: #fafbfb;
  margin: 0;
  padding-bottom: 80px;
}

.arc-animation .btn-link {
  margin: 30px 0 35px;
}

.arc-animation-content {
  float: left;
  margin-top: -17%;
  position: relative;
  z-index: 0;
}

.arc-line {
  animation: arc 2s cubic-bezier(0.82, 0, 0.19, 1);
  -webkit-animation: arc 2s cubic-bezier(0.82, 0, 0.19, 1);
  fill-opacity: 0;
  stroke-width: 3;
  stroke: #eff1f0
}

.arc-animation .icon-txt {
  display: none;
}

@keyframes arc {
  0% {
    stroke-dasharray: 3638;
    stroke-dashoffset: 3638
  }
  100% {
    stroke-dashoffset: 7276;
    stroke-dasharray: 3638
  }
}

#phase1 {
  opacity: 0;
  animation: fadeInOpacity 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1s
}

@keyframes fadeInOpacity {
  100% {
    opacity: 1
  }
}

#phase2 {
  opacity: 0;
  animation: fadeInOpacity1 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.2s
}

@keyframes fadeInOpacity1 {
  100% {
    opacity: 1
  }
}

#phase3 {
  opacity: 0;
  animation: fadeInOpacity2 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.4s
}

@keyframes fadeInOpacity2 {
  100% {
    opacity: 1
  }
}

#phase4 {
  opacity: 0;
  animation: fadeInOpacity3 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.8s
}

@keyframes fadeInOpacity3 {
  100% {
    opacity: 1
  }
}

#phase5 {
  opacity: 0;
  animation: fadeInOpacity4 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 2s
}

@keyframes fadeInOpacity4 {
  100% {
    opacity: 1
  }
}

.arc-animation text {
  font-family: 'Maven Pro', sans-serif;
  font-weight: 300;
}

.show_ph {
  opacity: 0;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  padding: 0;
  float: left;
  width: 100%;
  height: 0;
  overflow: hidden;
  transform: translateY(20px);
}

.show_ph.current {
  opacity: 1;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  z-index: 999999;
  display: block!important;
  height: auto!important;
  transform: translateY(0);
}

.show_ph .product-features svg {
  margin: 0 5px;
  height: 50px;
  width: 30px;
  padding: 0;
}

svg#Arc_1_ {
  overflow: visible;
  position: relative;
  z-index: 99;
}

circle.c1 {
  stroke: #eff1f0;
  stroke-width: 10px!important;
}

circle.c2 {
  stroke: #fafbfb;
  stroke-width: 4;
}

.arc-animation .product-img {
  width: 20%;
}

.active_ph path {
  opacity: 0;
}

.active_ph .c1 {
  -webkit-transition: all .4s cubic-bezier(.82, 0, .19, 1);
  -moz-transition: all .4s cubic-bezier(.82, 0, .19, 1);
  transition: all .4s cubic-bezier(.82, 0, .19, 1);
}

rect.c3 {
  fill: rgba(0, 0, 0, 0);
}

#phase1.active_ph .c1 {
  stroke: #8fc85a;
}

#phase2.active_ph .c1 {
  stroke: #F3845D;
}

#phase3.active_ph .c1 {
  stroke: #68C5AD;
}

#phase4.active_ph .c1 {
  stroke: #60A6DB;
}

#phase5.active_ph .c1 {
  stroke: #9674A5;
}

.active_ph text.t1 {
  font-size: 20px;
  -ms-transform: translate(80px, -40px);
  -webkit-transform: translate(80px, -40px);
  transform: translate(80px, -40px);
  fill: #969a9d;
}

.active_ph text.t2 {
  font-size: 40px;
  -ms-transform: translate(80px, 0px);
  -webkit-transform: translate(80px, 0px);
  transform: translate(80px, 0px);
  fill-opacity: 1;
}

text.t1 {
  font-size: 20px;
}

text.t2 {
  font-size: 40px;
  -ms-transform: translate(80px, 20px);
  -webkit-transform: translate(80px, 20px);
  transform: translate(80px, 20px);
  fill-opacity: 0;
}

.disactive_ph {
  cursor: pointer
}

text {
  -webkit-transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1);
  -moz-transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1);
  transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1)
}

.active_ph circle {
  cursor: pointer;
  stroke-width: 4px
}

.show_phase1 a {
  color: #8fc85a;
}

.show_phase2 a {
  color: #F3845D;
}

.show_phase3 a {
  color: #68C5AD;
}

.show_phase4 a {
  color: #60A6DB;
}

.show_phase5 a {
  color: #9674A5;
}

.show_phase1 {
  display: none;
  -webkit-animation: fadein 1800ms ease;
  -moz-animation: fadein 1800ms ease;
  -ms-animation: fadein 1800ms ease;
  -o-animation: fadein 1800ms ease;
  animation: fadein 1800ms ease
}

text.t3 {
  font-size: 20px;
}

@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-ms-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@media only screen and (max-width: 1100px) {
  .arc-animation {
    padding: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  .arc-animation {
    padding: 0 20px;
    margin: 40px 0;
    border-radius: 0;
  }
  text.t2 {
    font-size: 50px;
  }
  .active_ph text.t2 {
    font-size: 50px;
  }
  .active_ph text.t1 {
    -ms-transform: translate(80px, -50px);
    -webkit-transform: translate(80px, -50px);
    transform: translate(80px, -50px);
  }
  .phase-btn:hover .t1 {
    -ms-transform: translate(80px, -50px);
    -webkit-transform: translate(80px, -50px);
    transform: translate(80px, -50px);
  }
  text.t1 {
    font-size: 30px;
  }
  .arc-animation a {
    font-size: 24px;
    margin: 15px 0 20px;
  }
  .arc-animation p {
    width: 100%;
  }
  .show_ph .product-features svg {
    display: none;
  }
  .arc-animation .product-img {
    width: 30%;
  }
}

@media only screen and (max-width: 400px) {
  text.t2 {
    font-size: 70px;
  }
  .active_ph text.t2 {
    font-size: 70px;
  }
  .active_ph text.t1 {
    -ms-transform: translate(80px, -70px);
    -webkit-transform: translate(80px, -70px);
    transform: translate(80px, -70px);
  }
  .phase-btn:hover .t1 {
    -ms-transform: translate(80px, -70px);
    -webkit-transform: translate(80px, -70px);
    transform: translate(80px, -70px);
  }
  text.t1 {
    font-size: 50px;
  }
  .arc-animation .product-img {
    width: 40%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arc-animation">
  <header class="main-header">
    <div class="container flex">
      <div class="col-3 left">
        <div class="flex-1">
          <span class="category" style="color: #28353d;">HTML 5 </span>
        </div>
      </div>
    </div>
  </header>
  <div class="col-4 margin">
    <svg class="arc" version="1.1" id="Arc_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1186 311.985" enable-background="new 0 0 1186 311.985" xml:space="preserve">
        <path id="arc" class="arc-line" fill="none" stroke="#F4F4F4" stroke-width="2" stroke-miterlimit="10" d="M1105.296,271.07
          c-70.067-68.721-150.403-120.396-235.953-155.384c-88.668-36.263-182.936-54.283-277.193-54.283h0.146
          c-94.257,0-188.525,18.02-277.193,54.283c-85.55,34.988-165.886,86.746-235.953,155.467"/>
        <g id="phase5" class="phase-x ph5 disactive_ph">
          <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="1104.994" cy="271.403" r="12.5"/>
              <circle class="c2" fill="#9674A5" cx="1104.994" cy="271.403" r="12.5"/>
              <rect class="c3" x="1015" y="175" width="180" height="120"></rect>
              <text class="t1" x="1024" y="240" fill="#9674A5" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 5</tspan>
              </text>

              <text class="t2" x="1024" y="220" transform="translate(80)" fill="#9674A5">
                <tspan text-anchor="middle" dy="15">Immunity</tspan>
              </text>

              <path fill="#FFFFFF" d="M1109.994,270.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S1110.547,270.278,1109.994,270.278z"/>
          </g>
            <text class="t3" x="1025" y="320" fill="#969a9d" transform="translate(80)">
              <tspan  text-anchor="middle">PM</tspan>
            </text>
        </g>
          
        <g id="phase4" class="phase-x ph4 disactive_ph">
          <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="868.994" cy="115.403" r="12.5"/>
              <circle class="c2" fill="#60A6DB" cx="868.994" cy="115.403" r="12.5"/>
              <rect class="c3" x="790" y="20" width="150" height="120"></rect>
              <text class="t1" x="788" y="85" fill="#60A6DB" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 4</tspan>
              </text>

              <text class="t2" x="788" y="65" transform="translate(80)" fill="#60A6DB">
                <tspan text-anchor="middle" dy="15">Protein</tspan>
              </text>
              
              <path fill="#FFFFFF" d="M873.994,114.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S874.547,114.278,873.994,114.278z"/>
          </g>
        </g>
          
        <g id="phase3" class="phase-x ph3 disactive_ph">
          <g class="phase-btn">
        <circle class="c1" fill="#fff" cx="591.994" cy="61.403" r="12.5"/>
              <circle class="c2" fill="#68C5AD" cx="591.994" cy="61.403" r="12.5"/>
        <rect class="c3" x="520" y="-35" width="140" height="120"></rect>
                <text class="t1" x="511" y="30" fill="#68C5AD" transform="translate(80)">
                  <tspan  text-anchor="middle">Phase 3</tspan>
                </text>

                <text class="t2" x="511" y="10" transform="translate(80)" fill="#68C5AD">
                  <tspan text-anchor="middle" dy="15">Boost</tspan>
                </text>


              <path fill="#FFFFFF" d="M596.994,60.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S597.547,60.278,596.994,60.278z"/>
          </g>
        </g>
        <g id="phase2" class="phase-x ph2 disactive_ph">
      <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="314.994" cy="115.403" r="12.5"/>
              <circle class="c2" fill="#F3845D" cx="314.994" cy="115.403" r="12.5"/>
              <rect class="c3" x="235" y="20" width="160" height="120"></rect>

                <text class="t1" x="235" y="85" fill="#F3845D" transform="translate(80)">
                  <tspan  text-anchor="middle">Phase 2</tspan>
                </text>

                <text class="t2" x="235" y="65" transform="translate(80)" fill="#F3845D">
                  <tspan text-anchor="middle" dy="15">Defense</tspan>
                </text>

              <path fill="#FFFFFF" d="M319.994,114.278h-4v-4c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-4c-0.552,0-1,0.447-1,1s0.448,1,1,1h4v4
                c0,0.553,0.448,1,1,1s1-0.447,1-1v-4h4c0.552,0,1-0.447,1-1S320.546,114.278,319.994,114.278z"/>
          </g>
        </g>
          
        <g id="phase1" class="phase-x ph1 active_ph">
            <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="78.994" cy="271.403" r="12.5"/>
              <circle class="c2" fill="#8FC859" cx="78.994" cy="271.403" r="12.5"/>
              <rect class="c3" x="0" y="170" width="160" height="120"></rect>

              <text class="t1" x="0" y="240" fill="#8FC859" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 1</tspan>
              </text>

              <text class="t2" x="-1" y="220" transform="translate(80)" fill="#8FC859">
                <tspan text-anchor="middle" dy="15">Balance</tspan>
              </text>

              <path fill="#FFFFFF" d="M83.994,270.278h-4v-4c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-4c-0.552,0-1,0.447-1,1s0.448,1,1,1h4v4
                c0,0.553,0.448,1,1,1s1-0.447,1-1v-4h4c0.552,0,1-0.447,1-1S84.546,270.278,83.994,270.278z"/>
            </g>
            <text class="t3" x="-1" y="320" fill="#969a9d" transform="translate(80)">
              <tspan  text-anchor="middle">AM</tspan>
            </text>
        </g>
          
        </svg>

    <div class="arc-animation-content">
      <div class="show_phase1 show_ph current">
        <div class="product-features">
        </div>
        <a>Balance - Superfood</a>
        <p>Start your day in the most optimal manner with Arc Balance Superfood. It's unique formula balances your ph levels, improves your cellular and brain function, while also aiding your body to detoxify.</p>
      </div>

      <div class="show_phase2 show_ph">
        <div class="product-features">
        </div>
        <a>Defense - Ahiflower Omega 3</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase3 show_ph">
        <div class="product-features">
        </div>
        <a>Boost - Green Tea + Moringa</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase4 show_ph">
        <div class="product-features">
        </div>
        <a>Vegan Protein</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase5 show_ph">
        <div class="product-features">

        </div>
        <a>Immunity - Probiotic</a>
        <p>Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.</p>
      </div>
    </div>
  </div>


</div>

Possible duplicate of [Animation in mozilla doesn't work properly](https://stackoverflow.com/questions/46177909/animation-in-mozilla-doesnt-work-properly) — Dalton Cézane, Nov 21 '17 at 13:50
Another one: https://stackoverflow.com/questions/29140558/svg-animation-not-working-in-firefox-working-in-chrome-opera — Dalton Cézane, Nov 21 '17 at 13:51
Hi McMillan, here's the link: https://jsfiddle.net/8x4ghppc/2/ — Lukas, Nov 21 '17 at 14:24
Please creatw a [mcve] it's hard to tell with all this CSS and markup where the problem is, or if indeed there is one at all. — Robert Longson, Nov 22 '17 at 07:35

score 0 · Answer 1 · answered Nov 22 '17 at 09:34

0

The problem was transform="translate(80) right in the svg's . I removed it from the svg and placed it in the css. It looks good in all browser now.

answered Nov 22 '17 at 09:34

Lukas

159
2
4
18

SVG animation doesn't work well on Mozilla

1 Answers1