画面をズーム拡大、縮小すると、要素間に白い隙間が空くのはなぜ？

Googleクロームの画面の拡大、縮小機能（ズーム）を使用すると、要素と要素の間に白い隙間ができます。
これは何故なのでしょうか？

下記のコードでは長方形の要素と三角形の要素を合体させたものですが、
ブラウザ100%（拡大、縮小なし）の場合には正常の表示なのですが、
90%や110%に変更すると2つの要素の間に白い隙間ができてしまいます。。

ちなみにコードは下記の通りです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>

<body>
    <div class="test__desc">
        <h2>テキストテキストテキスト</h2>
    </div>
</body>

</html>


.test__desc{
    font-size: 3rem;
    color: #ffffff;
    text-align: center;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: #AAAAAA;
    position: relative;
}    

.test__desc:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-color: #AAAAAA transparent transparent transparent;
    border-style: solid;
    border-width: 28px 28px 0;
    transform: translate(-50%, 100%);
    content: "";
 }

もしご存じの方や、原因の推測等あればよろしくお願いいたします。

◆クロームのズーム機能はこちらのことです。
https://support.google.com/chrome/answer/96810?hl=ja

◆私の環境
Google chromeバージョン: 76.0.3809.132（Official Build）（64 ビット）

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1transform: translate(-50%, 95%);

に変えてみてください。

CodePen

ちなみにiOSブラウザでも同様の挙動が確認できました。
pxの計算の関係では？

投稿2019/09/11 23:20

編集2019/09/12 11:12

kyoya0819

総合スコア10429

Silky

2019/09/12 00:52

ご回答ありがとうございます！今外出先で頂いたコードは試すことはできないのですが、、 Translateについて、何故第二引数を100%から99%にするのでしょうか？

kyoya0819

2019/09/12 01:23

100%だと要素の下にぴったりくっつきます。 99%にすると三角形と四角形が少しかぶります。それによって三角形と四角形が離れて背景の白い線が出ることを防止できます。 50%などの他の値にしてみると100％や99%がどのような定義かわかり後学に活かせると思います。

Silky

2019/09/12 02:18

なるほど。。ありがとうございます！帰ったら、早速確認してまます！

kyoya0819

2019/09/12 03:13 編集

// 勘違いだったので削除 //

Silky

2019/09/12 11:09

＞// 勘違いだったので削除 // やはり倍率を変えると白い線が見えてしまいました。。これはよくあることなんですかね？他のウエブサイトも同じような事例がないか見てみます。＞50%などの他の値にしてみると100％や99%がどのような定義かわかり後学に活かせると思います。その通りですね。ただのコピペじゃなくていろいろ試して動きを把握することを大事にします。ありがとうございます。

kyoya0819

2019/09/12 11:12 編集

もう少し値を小さくしてみるとどうでしょう？回答追記しました。

Silky

2019/09/12 11:15

99％はまだ白い線が出たんですが、transform: translate(-50%, 98%);から白い線が出なくなりました！ありがとうございました！

Silky

2019/09/12 11:16

そうですね。余裕をもって95%くらいにしておいたほうがいいかもれしれないですね！非常に助かりました。ありがとうございます。

kyoya0819

2019/09/12 11:23 編集

おそらく原因ですがpxの計算だと思います。ぴったりにするとtranslateの動かすpx値が1未満になってしまって繰り上げになって余計に下に動かしすぎてしまい微妙に余白が出るものと思われます。同様の理由で99％もダメだったと思われます。 95%あたりが良いかもしれません。（文字が重ならない範囲で）