html - CSS Border Transition添加了多余的多余像素

Question

我正在为我的 Electron 应用程序(HTML，SASS)设计一个按钮。悬停时，此按钮将在边框顶部和边框底部添加10px，然后将其高度调整为-20，以取消多余的边框高度。除了将小的边框(看起来少于1px)添加到每个边框(悬停的顶部和底部)时，我的过渡效果几乎完美，此附加边框增加了按钮的总高度，足以插入下游html在视觉上有点烦人的颠簸。在包含的gif中，当悬停过渡完成时，您会最注意到它，您应该会看到一个1px的边框在结尾处突然消失。如何防止边框的这几个额外像素生成并碰撞其余的html？还有其他方法可以产生与我相同的效果吗？
这是我在这里的第二篇帖子，最近一篇是在2年前，所以如果我缺少我应该包括的内容，请告诉我，谢谢阅读!
HTML:

<div class="--square e--block --btn">
    <h1>Create Backups</h1>                    
</div>

SCSS变量:

$mainSize: 100px;
$btnBorder: 10px;

SCSS:

//-- Basic element
.e--block {
    //-- Position
    //- Flex
    display: flex;
    flex-direction: column;
    justify-content: center;
    //- Text
    text-align: center;
    //- Align
    margin: $baseSpacing;

    //-- Style
    //- BG
    background-color: $btnColorLight;
    //- Text
    color: $white;
    font-weight: 2;
    //- Border
    //border: none;
    border-radius: $borderRadius;

    
    * {
        //-- Position
        //- Flex
        vertical-align: middle;
        //- Align
        padding: {
            top: 10px;
            bottom: 10px;
        }
        margin: auto;
    }
}

.--btn {
    //-- Style
    //- Border
    border: 0px solid white;
    //- Transition
    transition: {
        property: border-width, height;
        duration: 1s;
        timing-function: ease;
    }
}
.--square {
    //-- Position
    //- Size
    height: ($mainSize * 2);
    width: ($mainSize * 2);
}
.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    height: (($mainSize * 2) - ($btnBorder * 2));
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

Answer 1

我无法解释为什么会发生此问题，但是我想这是因为渲染引擎不善于处理这种双重转换。
作为解决方法，您可以在box-sizing上使用border-box值为 .--square 属性，并删除height更改:

.--square {
   //-- Position
   //- Size
   height: ($mainSize * 2);
   width: ($mainSize * 2);
   box-sizing: border-box;
}

.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}