Vfrdtyky

I have an animated SVG (using CSS animation) that is being clipped in Google Chrome only. This wasn't happening at all until a recent browser update, I can't say for sure exactly which update it was.

In other browsers such as Firefox or IE Edge, the animation displays as expected.

I've been driving myself crazy trying to figure out why this is happening, the SVG and container elements are both set to 'overflow: visible;' even though this should be default behaviour anyway.

Does anyone know why this might have changed all of a sudden? Or if I've done something wrong somewhere?

I've uploaded a simplified example to codepen: https://codepen.io/janxalot/pen/YRVyZB

HTML Code

<div id="container" class="container">

  <div class="text-content-outer">  

            <svg id="logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450.3 131.6">

                <a class="svg-fallback">

                    <path class="fill-secondary logo__detail" d="M223.9,9.3l-31.3,0V0l31.3,0V9.3z" />

                    <g class="fill-primary logo__top-text">

                        <path class="e letter-fade" d="M0,74.8V25.2h32.3v8h-23V45H26v8H9.3v13.9h23.7v8H0z" />

                        <path class="l letter-fade" d="M54.5,74.8V25.2h9.3v41.7h21.2v8H54.5z" />

                        <path class="i letter-fade" d="M106.9,74.8V25.2h9.3v49.6H106.9z" />

                        <path class="z letter-fade" d="M172.3,74.8h-34.8v-8l22.8-33.6h-21.2v-8h33v7.6l-23.6,34.1h23.8V74.8z" />

                        <path class="a letter-fade" d="M214.2 25.1L202.5 25.1 188.5 74.8 197.7 74.8 202.7 56.2 208.4 34.6 208.6 34.6 214 56.2 218.8 74.8 228 74.8z" />

                        <path class="b letter-fade" d="M247.7,25.2h18.1c9.7,0,16,3.3,16.6,12.2c0,5.2-2.1,9.1-7.4,11.3c6.4,2.6,8.5,5.6,8.5,13.1 c0,7.7-5.3,13.1-17.8,13.1h-18V25.2z M257.1,45h9.3c4.5,0,6.7-2.6,6.7-6.1c0-3.4-2.2-6-6.7-6h-9.3V45z M257.1,67.1h9.3 c5.4,0,7.8-2.5,7.8-7.2s-2.4-7.2-7.8-7.2h-9.3V67.1z" />

                        <path class="e2 letter-fade" d="M306.8,74.8V25.2h32.3v8h-23V45h16.7v8h-16.7v13.9h23.7v8H306.8z" />

                        <path class="t letter-fade" d="M392.3,25.1v8h-12.8v41.7h-9.3V33.1h-12.8v-8H392.3z" />

                        <path class="h letter-fade" d="M412.9,74.8V25.2h9.3V45H441V25.2h9.3v49.6H441V53.5h-18.8v21.3H412.9z" />

                    </g>

                    <g class="fill-primary logo__bottom-text">

                        <path d="M329.7,131.3v-24.2h4.7l9.4,16.5h0.1v-16.5h4.3v24.2h-4.4l-9.7-17.2H334v17.2H329.7z" />

                        <path d="M365.1,131.6c-6.5,0-10-4.5-10-12.4c0-7.9,3.5-12.4,10-12.4c6.5,0,10,4.5,10,12.4 C375.1,127.1,371.6,131.6,365.1,131.6z M365.1,110.6c-3.7,0-5.4,2.9-5.4,8.5c-0.1,5.7,1.7,8.5,5.4,8.5c3.7,0,5.4-2.9,5.4-8.5 C370.6,113.5,368.8,110.6,365.1,110.6z" />

                        <path d="M382,131.3v-24.2h9.5c5.4,0,7.6,3.2,7.6,7.2c0,3-1.4,5.4-4.3,6.2l5.2,10.8h-5l-4.5-9.8h-3.9v9.8H382z M386.5,117.7h3.4c3.6,0,4.6-1.1,4.6-3.4c0-2.3-1.3-3.4-3.9-3.4h-4.1V117.7z" />

                        <path d="M421.7,107.1v3.9h-6.2v20.3H411v-20.3h-6.2v-3.9H421.7z" />

                        <path d="M428.4,131.3v-24.2h4.5v9.6h9.2v-9.6h4.5v24.2h-4.5v-10.4H433v10.4H428.4z" />

                    </g>

                </a>

                <image src="/img/en-logo-fallback.png" xlink:href="" alt="Elizabeth North"></image>

            </svg>    

        </div>

</div>

SCSS Code

$primary: #002c40;

$secondary: #00a9a3;



@keyframes letter-fade {

  0% { 

    opacity: 0;

    transform: translateX(-0.3rem);

    -webkit-transform: translateX(-0.3rem);

    -ms-transform: translateX(-0.3rem);

  }

  70% {

    transform: translateX(0.2rem);

    -webkit-transform: translateX(0.2rem);

    -ms-transform: translateX(0.2rem);

  }

  100% { 

    opacity: 1;

    transform: translateX(0);

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

  }

}



@keyframes logo-detail {

  0% { 

    fill: $primary; 

    opacity: 0;

    visibility: visible;

    transform: translateY(3.7rem);

    -webkit-transform: translateY(3.7rem);

    -ms-transform: translateY(3.7rem);

  }

  30% {

    opacity: 1;

    fill: $primary; 

    transform: translateY(3.7rem);

    -webkit-transform: translateY(3.7rem);

    -ms-transform: translateY(3.7rem);

  }

  60% {

    transform: translateY(-7rem);

    -webkit-transform: translateY(-7rem);

    -ms-transform: translateY(-7rem);

  }

  100% { 

    visibility: visible;

    opacity: 1;

    fill: $secondary; 

    transform: translateY(0);

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

  }

}



@keyframes logo-drop {

  0% { 

    transform: translateY(0);

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

  }

  50% { 

    transform: translateY(0.5rem);

    -webkit-transform: translateY(0.5rem);

    -ms-transform: translateY(0.5rem);

  }

  100% { 

    transform: translateY(0);

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

  }

}



@keyframes logo-bottom-drop {

  0% { 

    opacity: 0; 

    transform: translateY(-3.7rem);

    -webkit-transform: translateY(-3.7rem);

    -ms-transform: translateY(-3.7rem);

  }

  70% {

    transform: translateY(0.5rem);

    -webkit-transform: translateY(0.5rem);

    -ms-transform: translateY(0.5rem);

  }

  100% { 

    opacity: 1;

    transform: translateY(0);

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

  }

}



html, body {

  height: 100%;

}



.svg-fallback {

  display: block;

  position: absolute;

  cursor: auto;

  overflow: visible;

  pointer-events: none;

  left: -100%;

  height: 0;

  width: 0;

}



// Utilities

.fill-primary {

  fill: $primary;

}



.fill-secondary {

  fill: $secondary;

}





#container {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.text-content-outer {

  position: relative;

  z-index: 4;

  max-width: 75%;

  overflow: visible;



  @media (min-width: 576px) {

    max-width: 85%;

  }

}



.logo {

  width: 100%;

  height: auto;

  overflow: visible;

  animation: logo-drop 0.95s 5.1s 1 forwards cubic-bezier(0.19, 1, 0.22, 1);



  @media (min-width: 576px) {

    width: 500px;

  }



  @media (max-height: 500px) {

    width: 350px;

  }



  .letter-fade {

    opacity: 0;

    animation: letter-fade 0.3s 0.3s 1 forwards

      cubic-bezier(0.455, 0.03, 0.515, 0.955);



    &.l {

      animation-delay: 0.6s;

    }



    &.i {

      animation-delay: 0.9s;

    }



    &.z {

      animation-delay: 1.2s;

    }



    &.a {

      animation-delay: 1.5s;

    }



    &.b {

      animation-delay: 1.8s;

    }



    &.e2 {

      animation-delay: 2.1s;

    }



    &.t {

      animation-delay: 2.4s;

    }



    &.h {

      animation-delay: 2.7s;

    }

  }



  .logo__detail {

    visibility: hidden;

    animation: logo-detail 2.5s 3s 1 forwards

      cubic-bezier(0.175, 0.885, 0.32, 1.175);

  }



  .logo__bottom-text {

    transform: translateY(-3.7rem);

    -webkit-transform: translateY(-3.7rem);

    opacity: 0;

    animation: logo-bottom-drop 0.5s 5.4s 1 forwards

      cubic-bezier(0.19, 1, 0.22, 1);

  }



  image {

    max-width: 300px;

    width: 100%;

    height: auto;

    max-width: 100%;



    @media (min-width: 576px) {

      width: 500px;

    }



    @media (max-height: 500px) {

      width: 350px;

    }

  }

}

I can confirm this example is working as expected in FF and Edge, but not in Chrome.

Thanks!