CSS Loaders | Transform & box-shadow animation bug

Question

I am using CSS Loaders but inside a div aligned center using transform: translate(-50%, -50%).

Note that animation is using box-shadow.

Problem: The animation circles are getting cut off from bottom when they expand.

I tried: If I increase the size of circles by increasing font-size the cutoff reduces i.e if I change the font size to 15 px the cuttoff almost disappears.

JS-Fiddle

When I tried the same code from JS Fiddle in stackoverflow code snippets the bug didn't occurred as you can see below!

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .loader:before,
    .loader:after,
    .loader {
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation: load7 1.8s infinite ease-in-out;
      animation: load7 1.8s infinite ease-in-out;
    }
    .loader {
      color: #f00;
      font-size: 2px;
      margin: 20px auto;
      position: relative;
      text-indent: -9999em;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    .loader:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .loader:after {
      left: 3.5em;
    }
    .loader:before,
    .loader:after {
      content: '';
      position: absolute;
      top: 0;
    }
    @-webkit-keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }
    @keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }

<div class="center">
  <div class="loader">Loading...</div>
</div>

Answer 1

Remove transform: translateZ(0); on .loader class.
It's not necessary here and set the content "more to bottom".