为什么转换元素的变换比例会导致某些子元素抖动

Question

当用户将鼠标悬停在卡片元素上时，我仅通过变换卡片来尝试缩放卡片元素。

但是我注意到，在很多情况下，当卡片悬停时，子元素会以某种方式抖动，即某些字母的高度跳动一秒钟。

这是我不断经历的效果的一个例子。

https://codepen.io/andrewmumblebee/pen/OrBGzm

您会注意到TEST的S在转换过程中的高度跳了起来。

我以前已经设法完成了一个完全平滑的过渡，但这是绝对必要的。

https://codepen.io/andrewmumblebee/pen/REevdB

在删除绝对位置等之后，它仍然很平滑，因此我认为这与拥有多个子元素有关。

这是重要的代码，完整的代码可以在第一个Codepen链接上找到。

    <div class="container">
        <div class="card">
            <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Godot_icon.svg" />
            <div class="text">
                test
            </div>
        </div>
    </div>

    body {
        background: #478cbf;
    }

    .container {
        margin: 50px auto;
        width: 200px;
    }

    img {
        width: 200px;
        height: 200px;
    }

    .card {
        width: 250px;
        height: 300px;
        background: linear-gradient(#444, #333);
        transition: all 0.3s;
        text-align: center;
        padding: 30px;
        will-change: transform;
        transform: scale(1);
        box-shadow: rgba(#000000, 0.2) 5px 5px 10px;
    }

    .text {
        font-size: 50px;
        text-transform: uppercase;
        color: white;
        font-family: arial;
        will-change: transform;
        text-align: center;
    }

    .card:hover {
        transform: scale(1.1);
        box-shadow: rgba(#000000, 0.2) 10px 10px 10px;
    }