webkit-transform : translate3d and div 100 % height

사파리와 크롬 (모바일/데스크톱)의 이상한 문제로 webkit-transform의 전역 스타일을 적용 할 때 : translate3d, div 배경색 및 100 % 스타일로 설정된 높이가 더 이상 작동하지 않습니다. 또한 상단 설정 : 0px 및 하단 : 0px도 실패합니다. global -webkit-transform 스타일을 제거하면 모든 것이 예상대로 작동합니다. 어떤 아이디어? 당신이 모든에 변환을 적용 할 것 왜webkit-transform : translate3d and div 100 % height

* 
    { 
     -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>

출처

2011-04-05 Anonymous

잘 모르겠어요에, 어떤 경우에 변화를 (아마도 당신은 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/

출처

2011-04-05 23:26:02 Duopixel

휴대 기기 (대부분 iOS)에서 -webkit-transform을 사용하면 화면 깜박임 문제가 발생합니다. 한 응용 프로그램에서이 스타일을 제거하는 유일한 방법은 해당 스타일을 전 세계적으로 적용하는 것입니다. 나는 그것을 개별적으로 요소에 추가하려했지만 여전히 깜박 거렸다. 고마워, 내가 제출 한 문제를 해결합니다. –

흠,이 사실은 나를 위해 깜박임을 없애지 만, 대신이 코드는 iPad에서 모바일 사파리를 충돌시킵니다. – emilolsson

html 태그 (* : not (html) 의미)를 제외한 모든 요소 대신 애니메이션으로 만들 요소에만 -webkit-transform : translate3d (0,0,0)을 적용 해보십시오. – Duopixel

당신은 다음을 사용하여 시도해야 참조하십시오.

.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 %, 높이 : GPU를 인계 받기 전에 컴포지트 레이어를 구성하는 방법을 파악하는 데 많은 CPU가 필요하기 때문에 100 % 어렵게 만듭니다.

출처

2012-12-11 06:20:44 Newfront

webkit-transform : translate3d and div 100 % height

답변

관련 문제