CSS 변형 : scale()은 Firefox에서 스크롤바를 소개합니다. 제거하는 방법은 무엇입니까?

우리는 브라우저 설정을 통해 확대 모방하기 위해 CSS 선언 transform:scale(n)를 사용 (예 : ctrl 등 - - 또는 ctrl - - +, ctrlmousewheel). 이것은 Webkit 브라우저에서 의도 한대로 작동하지만 Firefox는 페이지를 보이는 높이 이상으로 확장하고 스크롤 막대를 표시합니다.CSS 변형 : scale()은 Firefox에서 스크롤바를 소개합니다. 제거하는 방법은 무엇입니까?

<body> 
    <div id="middle-col"> 
     This is the middle column. 
    </div> 
</body>

CSS : 80 % 축소 할 때, 다음과 같은 설정이 적용됩니다

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 
body { 
    background: #999; 
    -webkit-transform-origin: top left; 
    transform-origin: top left; 
} 
#middle-col { 
    width: 400px; 
    height: 100%; 
    margin: 0 auto; 
    background: #fff; 
}

body.scale80 { 
    -webkit-transform: scale(.8); 
    transform: scale(.8); 
    width: 125%; /* 100/.8 */ 
    height: 125%; /* 100/.8 */ 
}

최소한의 경우에 감소

는

, 페이지 구조는 다음과 같습니다

Firefox에 나타나는 세로 스크롤 막대를 피하려면 어떻게합니까?

Ctrl - +/-을 사용할 때 동일한 페이지가 Firefox (스크롤바가없는 =)에 올바르게 표시됩니다.

정적 예 : http://jsfiddle.net/qf1vjauj/1/
동적 예 : http://jsfiddle.net/8uqk1med/3/

참고 :이 특별한 케이스 디자인입니다. 일반적으로 페이지 확대는 사용자 선택으로 남겨 두어야합니다.

출처

2014-09-07 Zilk

아직 문제를 해결할 수 있는지 알 수 없지만 동일한 문제가 있습니다. 상위 div를 overflow : hidden으로 설정하여 문제를 해결했습니다.

출처

2015-04-09 10:28:51 iSpacecrusader

예! 고맙습니다 :) – Randomblue

CSS 변형 : scale()은 Firefox에서 스크롤바를 소개합니다. 제거하는 방법은 무엇입니까?

답변

관련 문제