Размер анимационного фона не работает правильно в последней версии Chrome

Question

Я наткнулся на интересную ошибку, в которой анимация размера фона не учитывает переход в последней версии Chrome. Кажется, это хорошо работает в Safari, Firefox и Internet Explorer.

background-size: 100% 
transition: background-size 0.5s 

    &:hover 
    background-size: 150% 
    transition: background-size 0.5s 

Here's a link to a codepen

Answer 1

попробуйте добавить новый элемент, а затем добавить фон к этому элементу
переполнения добавить: скрытый к родительскому элементу
при наведении масштаба ребенок элемент

как

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

.child { height:400px;width:200px;background:url....;transition:0.5s} 
.parent { overflow:hidden;} 
.parent:hover .child { transform:scale(1.5)} 

или вы можете использовать псевдо-элемент, как: перед тем

.parent { overflow:hidden;} 
.parent:before { width:100%;height:100%;content:"";position:absolute;top:0;background:url....;transition:0.5s } 
.parent:hover:before { transform:scale(1.5)} 

вот jsfiddle со вторым раствором
первое решение работает как хорошо. вы выбираете :)