브라우저 검색 요소

Question

를 변환 I 변환이 : 숨겨진 요소 : 번역 요소는 오버 플로우 insied

<div style="overflow: hidden; height: 200px; width: 200px;"> 
<div class="hidden-element" style="transform: translate(300px, 300px)">Hidden</div> 
</div> 

을 내가 숨겨진 요소가 : 호버를 {변환 : 변환 (0 픽셀, 0 픽셀); } 내부 요소의 규칙.

"숨김"(Ctrl + F)에 대한 브라우저 검색을 수행하면 요소가 원래 위치로 이동됩니다!

왜 발생합니까? 그것을 막는 방법? 그리고 왜 브라우저 검색이 제 레이아웃을 변경합니까?

참고 : 포커스 CSS 규칙이 없습니다. 그냥 가져가. Chrome, Opera 및 IE에서 발생합니다. Firefox에는 없습니다.

감사합니다.

Answer 1

이것은 요소가 보이지는 않지만 포함 된 div가 새롭게 선택된 내용을 표시하기 위해 스크롤하는 경우는 아닙니다 (이는 포함 div의 경계 외부에 있기 때문에 보이지 않습니다). 이 바이올린에 더 명확하게 동작을 볼 수 있습니다 http://jsfiddle.net/fJ52f/1/ (아래 CSS)

#outer{ 
    overflow: hidden; 
    height: 200px; 
    width: 200px; 
    background:#FF0000; 
} 
#inner{ 
    transform: translateY(300px); 
    -moz-transform: translateY(300px); 
    -webkit-transform: translateY(300px); 
} 

을 내가, 스크롤 이벤트를 검출하는 짧은 HTML의 스크롤에 초점 동작을 방지 할 수있는 방법을 알고 아니에요 자바 스크립트와 강제로 다시. 하지만 숨겨진 오버플로 콘텐츠에 의존하지 않고 요소를 숨기려면 항상 visibility:hidden을 사용하면됩니다.