简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS3动画的硬件加速的问题。。
黄舟
黄舟 2017-04-17 11:46:26
0
1
734

查资料好像是这么说的：CSS3硬件加速触发时候，会创建一个新的层，其中的图像会用GPU进行渲染，来提高性能。

这样有了一个问题呀，最近写东西时候，发现如果子级元素触发了硬件加速渲染的动画，如果父级也是硬件渲染的，就算父级没有动画效果，也会在硬件渲染层里触发父级的重绘。

下面是我简单写了一个示例，父级.p用transform属性来调整了下位置，子元素a标签在hover时触发了opacity的过渡动画效果的话，会发现父级元素也被重绘了。

用谷歌的layer border可以看到：

父级也在层里面，而且用paint flashing也会看到，父级也会被重绘，而这根本是没必要的。。我的实际情况中，父级元素内还有个图片，如果图片被重绘的话就会变模糊一段时间。。。

如果取消了父级的transform属性，就不会触发父级的重绘了。

该怎么办才能使a标签触发动画时，不让父元素也跟着重新渲染呢？

想过更改父元素定位的方法，不用transform了。。。但是貌似还要改dom结构啊。。有没有什么设置可以让某个元素禁止使用硬件加速呀。。。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .p{
            width: 300px;
            height: 180px;
            background-color: #888;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .p a{
            position: absolute;
            width: 40%;
            height: 80%;
            top: 10%;
            opacity: 0;
            transition: opacity 1s;
            background-color: #333;
        }
        .p a:hover{
            opacity: 1;
        }
        .prev{
            left: 0;
        }
        .next{
            right: 0;
        }
    </style>
</head>
<body>
<p class="p">
    <a class="prev"></a>
    <a class="next"></a>
</p>
</body>
</html>
黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all(1)
迷茫
迷茫2017-04-17 11:48:26 1 floor

Maybe the concept is not described clearly.
Chromium/webkit hardware acceleration

  1. The transform case requires 3D transformation to create a new composition layer, that is, translate3d(-50%,-50%,0) in the example. Usually enabled using translateZ(0);

  2. Opacity and transition/animation cases require that the composition layer is created during the execution of the animation. That is, the element will return to its previous state after the transition or animation does not start or ends. This also explains the transition in the example. The starting and ending parent elements will be redrawn. The process is: remove the element (the element here is the internal representation of RenderObject/Layer, the same below) ->Create the composition layer, transition animation, delete the composition layer ->Move the element back;

Attachment: It is better to remove the transform of the parent here. It may be because transform: translate destroys the rendering layer of the parent, creates a new rendering layer but does not meet the conditions for creating a composition layer (using hardware acceleration), and So that it is in the same rendering layer as its sub-element p (generally), and the leaving and joining of sub-elements causes it to be redrawn. (The source of this conclusion: Enable hardware acceleration for child elements and completely separate from the parent element, such as adding transform 3d transformation translateZ(0);)

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！