Question

我想要的是什么：

我想要做的是在单击按钮（图像）后给div，footer和导航带来blury效果。但与此同时，我希望弹出窗口从屏幕顶部显示过渡。在PC或Mac上一切正常。

问题：

在iPad上：点击按钮后，屏幕会暂停一下，添加模糊效果，然后弹出窗口中出现没有过渡。

如何在iPad上获得适用于pc或mac的结果。有人能帮助我吗？

JS：

function showPopup(selector){
   $(selector).transition({top: -75});
   $('#content').css({"background":"rgba(0,0,0,0.4)"});
   $("div#content, footer, div#navigation").addClass("blur");
}

CSS

.blur{
  -webkit-filter: blur(10px);
 /*************SOLUTION***************/
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
 /************************************/
}

我正在使用jquery.transit.js进行转换，我的iPad上安装了IOS8（8.1.2）。

Answer 1

我在这里找到了一个解决方案：http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

我补充说：

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

使用IOS8，过渡和模糊滤镜无法在iPad上正常工作

1 个答案: