수직으로 스크롤 된 div의 텍스트 입력이 키보드 입력에 이상하게 반응합니다.

번역 된 수직 스크롤 div의 텍스트 입력에 문제가 있습니다. 웹킷 브라우저에서 수직으로 스크롤 된 div의 텍스트 입력이 키보드 입력에 이상하게 반응합니다.

는이 단순화 된 예를 참조하십시오 사업부의 바닥에

스크롤 텍스트 상자를 클릭하고 키보드 버튼을 누릅니다. div가 위로 스크롤하여 초점을 맞춘 입력이 표시되지 않습니다. 예상 동작은 div가 스크롤되지 않아야하며 사용자가 방해받지 않고 텍스트를 계속 입력 할 수 있다는 것입니다.

마치 브라우저가 번역을 고려하지 않고 스크롤 할 위치를 결정하는 것과 같습니다.

가능한 모든 해결책이 있습니까?

실제 응용 프로그램에서 해당 요소는 번역을 사용하여 화면에 애니메이션을 적용합니다. '최상'속성에있는 CSS 애니메이션을 번역본으로 바꾸면 애니메이션의 부드러움에 심각한 영향을 미치지 만 스크롤하는 문제는 해결됩니다.

출처

2012-10-03 RHamilton

간단한 대답 : translate을 사용하지 마십시오. 대신 margin-top 및 margin-left을 사용하십시오. 변환을 제거하고 추가하여 피들을 얻을 수 있습니다.

출처

2012-10-03 01:57:10

나는 OP가 이미이 솔루션을 알고 있지만 애니메이션을 위해 번역을 사용하고 싶다고 생각합니다. – grc

Webkit처럼 보이는 버그가 있습니다. 해결할 때까지 해결 방법은 다음과 같습니다. –

CSS3 애니메이션을 top 또는 margin-top에 사용하면 변환하는 하드웨어 가속 성능이 제공되지 않습니다. 단순히 translate3d (0,0,0)를 붙이면이 상황에서도 도움이되지 않는 것 같습니다. – RHamilton

오늘 아침에 샤워에 대해 생각한 후 해결 방법을 찾았습니다.

부모 div에서 스크롤하는 내용을 감싸고, 정상 div를 번역하고, 스크롤 div를 부모 div와 같고 반대 방향으로 번역하고 상단 또는 여백을 부모 변환 양으로 설정하여 내부 div를 올바르게 정렬하십시오 . http://jsfiddle.net/ZbguJ/5/

#Parent { 
    -webkit-transform: translate(0, -200px); /* animated */ 
} 
#Child { 
    -webkit-transform: translate(0, 200px); 
    top: -200px; 
    position:relative; 
}

바보를하지만, 일을 가져옵니다이 바이올린으로 업데이트 예를 참조하십시오.

출처

2012-10-03 20:10:46 RHamilton

수직으로 스크롤 된 div의 텍스트 입력이 키보드 입력에 이상하게 반응합니다.

답변

관련 문제