iOS css3 filter 动画问题？

Question

下面这个动画帧，android上和pc上无问题，android的微信中也无问题；
但是iPhone Safari上面就是无反应，iPhone的微信中依旧无反应；
Mac上 Safari 正常！ 求解！

@-webkit-keyframes blurOut {
  0% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}

@keyframes blurOut {
  0% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}

Answer 1

无意中发现(注意*号的标记部分)，改成下面这样却可以？ fuck......

@-webkit-keyframes blurOut {
  0% {
    **opacity: 1;**
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    **opacity: 1;**
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}

@keyframes blurOut {
  0% {
    **opacity: 1;**
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    **opacity: 1;**
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}