CSS Text-shadow性能问题。

Question

我正在开发一个项目，需要几个h1标签才能应用文本阴影。这导致了一些真正的性能问题，FPS低于5 :(

当文本首次进入视图时，文本会在页面顶部变得模糊，然后越接近窗口中间，它就会聚焦，当用户继续向上滚动时，它会再次模糊。

这个项目只需要在Chrome（v12）中工作，我很想知道是否有任何针对该问题的修复方法，或者使用较少的性能来模糊文本的替代方法？

干杯。

更新： 这是我最初申请的CSS：

color: transparent;   
text-shadow: 0px 0px 1px #FFFFFF;

然后我使用Javascript操作：

$(e.id).css('text-shadow', "0px 0px " + blurAmount + "px #FFFFFF");

这适用于几个大型（86px字体大小）文本元素。

Answer 1

动态CSS3文本阴影已经相当沉重的CPU应变，就浏览器渲染而言，并添加JavaScript导致窗口同时在每个可能的滚动帧上更新该值，导致浏览器重新用不同的设置渲染会导致这种情况。

据我所知，如果您需要这种确切的效果，则无法解决问题，因为效果的两个部分都需要大量的客户端计算。