ホバー時に動かした要素に意図しない隙間ができる

Question

こちらのコードは、背景赤の要素にホバーすると背景黄色の要素が手前に180度回転して、その後ろの背景青の要素が表示されるというものです。

<div class="container">
  <span>aiueo</span>
  <span>aiueo</span>
</div>

.container {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
  perspective: 300px;
}
span {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  line-height: 46px;
  text-align: center;
  border: 2px solid #444;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotateX(0deg);
  transform-origin: bottom;
}
span:nth-of-type(1) {
  background: blue;
}
span:nth-of-type(2) {
  background: yellow;
  transition: .3s;
}
.container:hover span:nth-of-type(2) {
  transform: translateY(-50%) rotateX(-180deg);
}

Chromeの場合、ホバーのエフェクトが終わると、下の画像のように背景黄色の要素と背景青の要素の間に隙間が空いてしまいます。この隙間ができないようにしたいのですが、どうすればいいでしょうか。

Chromeのバージョンは72.0.3626.121です。

それと、単純な疑問なのですが、外部サイトにコードを書いたにもかかわらず、この質問文でも同じコードを書いてほしい理由とはなんですか？

Comments

[m.ts10806]

状況が再現するコードを提示されないことには誰もアドバイスができないかと。

[m.ts10806]

ああ「こちら」のリンクですね。
余程のコード量がない限りは質問本文にご提示ください。

[GunseiKPaseri]

こちらChromeバージョン72ですが、隙間もなく目的通り表示できています。具体的なバージョンを明記してください

[kei344]

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。

Answer 1

Chrome 72.0.3626.119 の画面拡大状態（75%,125%,175%）で状態が何度か再現しました。
お使いのChrome でショートカットキー Ctrl+0 を実行してみてください。

本件とは関係ないかもしれませんが、Chrome は端数が出る計算の描画が汚いことがあります。