带按钮的奇怪视觉故障和动态改变的高度

Question

我有一个带有:: before伪元素的按钮作为背景，以实现动画悬停效果，并且在此按钮上方有一个具有自适应高度的旋转木马。

我的问题是，当用户将幻灯片更改为另一个不同高度的幻灯片时，按钮重新定位会显示一些问题，最糟糕的是我无法在Codepen上重现它（我试过here但是没有发生故障），所以我抓住了故障并在YouTube上发布，你可以看到视频点击here。

顺便说一句，这是我在按钮中的相关CSS：

.btn-block{
    position: relative;
    transition: .15s ease-out;
    transition-property: color;
}
.btn-block::before{
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background-clip: content-box;
    transition: .15s ease-out;
    transition-property: background, padding, border-radius;
}
.btn-block:hover::before{
    padding: 8px 10px;
}

我有什么可以做的关于这个故障，还是有另一种方法来实现我想要的悬停效果？