html - CSS3変換は、遷移中にテキストを灰色にしますか?

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>