CSS转换对IOS的反弹效果

Question

我使用过渡css效果创建了双重图像模糊效果。

在IOS浏览器上，效果是有弹性和奇怪的。 有任何线索如何解决？

https://jsfiddle.net/gmt68ecn/11/

因此，在Safari中，单击图像时的效果很奇怪。

HTML：

<div class="img-square">
    <div class="img-square-image"></div>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.img-square {
    height: 100vh;
    width: 100vw;
    background-image: url('http://via.placeholder.com/2200x1200?text=blurred');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: absolute;
}

.img-square-image {
    position: absolute;
    top: 200px;
    left: calc(50% - 150px);
    z-index: 75;
    height: 300px;
    width: 300px;
    background-image: url('http://via.placeholder.com/2200x1200');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    transition: all 0.8s linear;
    -webkit-box-shadow: 0px 0px 0px 10px rgba(153, 111, 81, 1);
    -moz-box-shadow: 0px 0px 0px 10px rgba(153, 111, 81, 1);
    box-shadow: 0px 0px 0px 10px rgba(153, 111, 81, 1);
}

.expand {
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
}

JS：

document.querySelector(".img-square-image").onclick = (e) => {
  e.target.classList.add('expand');
};