过渡和模糊滤镜无法在 iPad 和 IOS8 上正常协同工作

Question

我想要的：

我想要做的是在单击按钮（图像）后为 div、页脚和导航提供模糊效果。但与此同时，我希望弹出窗口从屏幕顶部过渡出现。在 PC 或 mac.

上一切正常

问题：

在 iPad 上：点击按钮后屏幕暂停片刻，添加模糊效果，然后弹出 屏幕上没有过渡 .

如何获得适用于 PC 或 mac iPad 的结果。有人可以帮助我吗？

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 进行转换，IOS8 (8.1.2) 安装在我的 iPad 上。

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;

过渡和模糊滤镜无法在 iPad 和 IOS8 上正常协同工作

Transition and blur filter not working together properly on iPad with IOS8

jquery

html

ipad

transition

blur