在响应式div上滚动背景位置 - 奇怪的行为

Question

我遇到了尝试滚动div的背景位置以模拟轮子动画（例如老虎机）的问题，事情是 - 如果超过48％，padding-bottom似乎会被卡住。你能弄清楚为什么会这样吗？

简而言之 - 我想知道为什么会这样（改变背景位置Y值）

<style>
body, html {
    padding:0;
    margin:0;
}

.wheel { 
    background: url(http://placehold.it/750x360) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    padding-bottom: 40%; /*Scrolls, no issue here*/
    height: 0;
    background-repeat: repeat-y;
    background-position: 0px 2400%;
    transition: all 5s ease-in-out;
}
</style>

<div class="wheel"></div>

这不是 -

<style>
body, html {
    padding:0;
    margin:0;
}

.wheel { 
    background: url(http://placehold.it/750x360) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    padding-bottom: 48%; /*Stuck*/
    height: 0;
    background-repeat: repeat-y;
    background-position: 0px 2400%;
    transition: all 5s ease-in-out;
}
</style>

<div class="wheel"></div>