webkit-transform:translate3d 和 div 100% 高度

发布于 2024-10-29 22:04:10 字数 1180 浏览 0 评论 0原文

我在 Safari 和 Chrome（移动/桌面）上遇到一个奇怪的问题，当我为 webkit-transform:translate3d 应用全局样式时，div 背景颜色和样式中设置的 100% 高度不再起作用。此外，设置 top:0px 和 Bottom:0px 也会失败。当我删除全局 -webkit-transform 样式时，一切都按预期工作。有什么想法吗？

    *
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

完整样本

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

     <style type="text/css">
        *
        {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            margin:0px;
            -webkit-transform:translate3d(0,0,0);

        }
        body {
        height:100%;
        }

    </style>


</head>
<body >

   <div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
            adsfasdf
    </div>

</body>
</html>

原文

I'm running into a weird issue on Safari and Chrome (mobile/desktop) that when I apply a global style for webkit-transform:translate3d, div background colors and 100% height set in the style no longer work. Additionally, setting top:0px and bottom:0px fail too. When I remove the global -webkit-transform style, everything works as expected. Any ideas?

    *
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

Full sample

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

     <style type="text/css">
        *
        {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            margin:0px;
            -webkit-transform:translate3d(0,0,0);

        }
        body {
        height:100%;
        }

    </style>


</head>
<body >

   <div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
            adsfasdf
    </div>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗忘曾经 2024-11-05 22:04:10

您应该尝试使用以下内容。

.hwa {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: flat;
}

仅在 div 上。

<div class="hwa"></div>

这样，您就不必担心后代选择器在合成层和创建 GPU 之前会使用大量 CPU。请记住，GPU 加速使用标准 CPU 动画内存的 4 倍（回流/重新计算/绘制）

此外，您还应该确保尽可能帮助浏览器，这意味着谨慎使用宽度：100％，高度：100％因为在 GPU 接管之前需要大量 CPU 来弄清楚如何构建复合层。

You should try using the following.

.hwa {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: flat;
}

only on the div.

<div class="hwa"></div>

This way you don't have to worry about descendent selectors which uses a lot of CPU before compositing the layers and creating the GPU. Keep in mind that GPU acceleration uses 4x the memory of standard CPU animation (reflow / recalculate / paint )

Also you should make sure that you help out the Browser as much as possible, this means use width: 100%, height: 100% sparingly since it takes a lot of CPU to figure out how to construct the composite layers prior to GPU taking over.

回复收藏 0 原文

一绘本一梦想 2024-11-05 22:04:10

我不确定为什么你想要对所有内容应用转换（也许你希望 GPU 启动？）在任何情况下，html 上的转换都会导致这种情况。您可以轻松解决它：

*:not(html)
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

参见 http://jsfiddle.net/Wv5Mx/

I'm not sure why you'd want to apply a transformation to everything (perhaps you want the GPU to kick in?) in any case, the transformation on the html is causing this. You can solve it easily:

*:not(html)
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

See http://jsfiddle.net/Wv5Mx/

回复收藏 0 原文

~没有更多了~