避免在css规模过渡的边界上模糊 - 仅限Safari Mac

Question

我正在使用缩放CSS attribut来缩放图像，但是当我在Safari Mac上检查时，不仅边缘元素悬停，而是同一列中的所有边框，在过渡期间变得模糊

以下是关于其运作方式的 codepen ：http://codepen.io/anon/pen/zoNjMB

html, body, div, span, a, img, figure, figcaption { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
figcaption, figure { display: block; }
body { line-height: 1; }
*, *:before, *:after { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/****************************************/

.content {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
    zoom: 1;
    overflow: auto;
    background: DarkCyan;
}

.content .box {
    display: inline-block;
    position: relative;
    width: 33.3333%;
    padding-bottom: 18.232%;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    overflow: hidden;
    float: left;
}

.content .box a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
}

.content .box a figure {
    position: relative;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.content .box a figure img {
  display: block;
  width: 103%;

  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: -moz-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: -ms-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: -o-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

}

.content .box a:hover figure img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.content .box a figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: inline-block;
  font-family: 'Arial';
  font-size: 0.6875rem;
  color: #FFFFFF;
  text-transform: uppercase;
  padding: 6px 10px;
  background: #000000;
}

<div class="content">
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/1" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/2" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/3" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/4" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/5" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/6" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/7" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
  <div class="box">
    <a href="">
      <figure>
        <img src="http://lorempicsum.com/simpsons/600/338/8" alt="" />
        <figcaption>Hello world</figcaption>
      </figure>
    </a>
  </div>
</div>

对于那些没有配备Safari的Mac的用户，这里有一张正在发生的事情的图像：http://i.imgur.com/czvQ3pJ.png（红色标记表示行为已改变）

如果有人知道如何做到这一点'没有发生'，那将是很好的分享。

感谢你的帮助。