html - CSS3 Transform 在过渡期间将文本变为灰色？

Question

我不知道这里发生了什么，但它在过渡期间将我的段落内的字体变为灰色。有任何想法吗？转换工作正常，但还决定在我的段落框中重新格式化我的文本？

编辑：Safari（OSX）中仍然存在问题

#wrapper {
  width: 100%;
  height: 100%;
  padding: 50px 0 50px 0;
  color: #ffffff;
  text-shadow: 1px 1px 1px gray;
}

.box {
  position: relative;
  width: 300px;
  height: 400px;
  background-color: #2183de;
  display: inline-block;
  margin: 0 0 0 22px;
  box-shadow: 0px 2px 5px black;
  -webkit-transition: all .2s ease-in-out
}

.box:hover {
  height: 400px;
  width: 300px;
  color: white;
  -webkit-transform: scale(1.1, 1.1);
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

#main a {
  height: 100%;
  width: 100%;
  display: block;
}

<div id="wrapper">
  <div class="box" id="one">
    <a href="#">
      <div class="boxpara">
        <p class="boxparapadding">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit tempor et labore dolor do sit.
        </p>
      </div>
    </a>
  </div>