CSS 邊框過渡添加了不需要的額外像素

Question

我正在為我的 electron 應用程序（HTML，SASS）設計一個按鈕。 在 hover 上，此按鈕將添加一個 10px 的邊框頂部和邊框底部，然后將其高度調整為 -20 以消除額外的邊框高度。 我的過渡工作幾乎完美，除了當每個邊框（懸停時的頂部和底部）添加一個小邊框（看起來小於 1px）時，這個額外的邊框增加了按鈕的總高度，剛好足以推動下游 html在一個視覺上很煩人的小凹凸處。 在包含的 gif 中，您會在懸停過渡完成時注意到它，您應該會看到一個 1px 的邊框在最后突然消失。 如何防止這額外的幾個邊框像素生成和碰撞我的 html 的 rest？ 還有其他方法可以創建我想要的相同效果嗎？

這是我在這里的第二篇文章，上一篇是在 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

我無法解釋為什么會出現這個問題，但我猜這是因為渲染引擎不擅長處理這種雙重轉換。

作為一種解決方法，您可以在.--square上有一個帶有border-box值的box-sizing屬性並刪除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;
}

Answer 2

此外，我認為您可以通過使用自定義timing-function來稍微加快這種顛簸，例如：

transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);