相关疑难解决方法(0)

我使用-webkit-transform(和-moz-transform/-o-transform)来旋转div.还有固定的位置,所以div与用户一起缩小.

在Firefox中它工作正常,但在基于webkit的浏览器中,它已经破碎了.使用-webkit-transform后,固定的位置不再起作用!怎么可能？

我想知道使用CSS Transitions与任何各种JavaScript动画库的性能有什么不同吗？(script.aculo.us,scripty2,jsAnim,MooTools,$fx,等等).

我在Safari和Chrome中尝试了各种测试,但实际上我没有看到任何差异.我认为CSS Transitions应该是硬件加速的.

更新:

我尝试Effect.Fade在5种不同的DIV上使用Scriptaculous (每种DIV都包含一些带有一些线条的画布).使用CSS过渡做同样的事情,我看到性能完全没有区别.两个DIV/Canvas都非常流畅,但是当我一次超过2个时,两者都很慢.

我在Safari 4,5(OSX),谷歌Chrome 5和FireFox 3.7pre中尝试过这个.全面的结果.

在回答UpHelix的回复时,您不仅限于hover等等.您可以通过更改任何transitionable样式来触发转换.例如,在JavaScript中设置元素的不透明度(之后,您已为该元素指定了transitionProperyand transitionDuration).

http://jsfiddle.net/ES4xG/8/使大多数视网膜设备崩溃.

iOS Safari"轻松"耗尽内存并在使用某些-webkit-transform指令时崩溃.这种方法提供了令人印象深刻的图形,但尤其是在视网膜显示器上,似乎消耗了大量内存并导致崩溃.

上面的演示显示的文本显示150次,否则将在PC浏览器上正常运行:

字体大小和元素数量被夸大以引起崩溃.的-webkit-transform: translate3d(0,0,0)意图强制每个元件的GPU加速绘图.

在实际应用中,我们使用translateX,Y,Z,scale和其他人,似乎被连接到GPU使用相同的方式.还使用了图像和精灵,但它们没有直接连接到崩溃.

鉴于以上情况:

1)iOS Safari崩溃是一个错误吗？

2)插入Apple仪器内存监视器,虚拟内存攀升,似乎是崩溃的罪魁祸首.究竟是什么使用这个记忆？

3)是否有其他GPU加速方法不会占用大量内存？

在我的滑块中,我遇到了问题,在我的淡化效果结束后,我旋转的容器的一部分看起来像一个步骤.我可以在这里举个例子:

http://lamit.webflow.com

正如您在滑块中看到的那样,在效果期间,文本栏的底部是平滑的.然而,在过渡之后,它看起来很奇怪.

关于如何摆脱它的任何想法？

更新

由于此站点已完成webflow,因此在分析代码时会出现一些css错误(由于Webflow的一些预防).

相关代码如下:

CSS

.mask {
    left: -2%;
    top: -50px;
    display: block;
    width: 105%;
    margin-right: auto;
    margin-left: auto;
   -webkit-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade">
    <div class="w-slider-mask mask">
        <div class="w-slide">
            <div class="slide-zusatz1">
                <div class="w-container slidertext">
                    <p>Here is some text</p>
                </div>
            </div>
            <img src="myimg.png">
         </div>
    </div>
</div>

谢谢