使用CSS的转换时图像消失了

Question

最近，我遇到了一个问题，就是每当我尝试对特定图像使用transform时，它都会变成空白。下图（转换前）：

此外，这是文件的信息：

CSS：

[id^=addition] {
    width: 75px;
    height: 75px;
    margin: auto;
    border-radius: 45%;
    cursor: pointer;
    display: inline-block;
    margin: 15px;
    color: rgba(0, 0, 0, 0);
    line-height: 55px;
    vertical-align: top;
    transition: box-shadow 0.4s, filter 0.5s, transform 0.3s;
    background-image: url(https://image.ibb.co/gLLYdU/bottom_buttons_min.png);
    background-size: 19199px 75px;
}

[id^=addition]:hover {
    transform: scale(1.1)
}

<div id=addition_example> </div>

一些将大文件分成几段的JS代码：

$('#addition_' + additions[i] + ', #addition_search_' + additions[i] + ', #addition_category_' + additions[i] + ', #addition_colorizing_' + additions[i]).css({
       'background-size': additions_buttons_scale[$.inArray(additions_type[i], addition_type_symbol)][1] * 69 + 'px 69px',
     'background-position': -69 * random_number + 'px',
     'background-color': 'rgba(255, 255, 255, 0)'
 })