webkit-transform: translate3d и div 100% высоты - PullRequest
Новая
       45

webkit-transform: translate3d и div 100% высоты

0 голосов
/ 05 апреля 2011

Я сталкиваюсь со странной проблемой в 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>

Ответы [ 2 ]

2 голосов
/ 11 декабря 2012

Вы должны попробовать использовать следующее. 

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

только на дел. 

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

Таким образом, вам не нужно беспокоиться о потомках-селекторах, которые используют много ресурсов ЦП, прежде чем объединять слои и создавать графический процессор. Имейте в виду, что ускорение GPU использует в 4 раза больше памяти, чем стандартная анимация процессора (reflow / recalculate / paint)

Также вы должны убедиться, что вы максимально помогаете браузеру, это означает, что вы будете использовать ширину: 100%, высоту: 100% экономно, так как требуется много ресурсов ЦП, чтобы понять, как создавать составные слои до GPU вступает во владение.

1 голос
/ 06 апреля 2011

Я не уверен, почему вы хотите применить преобразование ко всему (возможно, вы хотите, чтобы 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/

...