CSS transform: scale () introduces scrolling in Firefox, how to get rid of it?
We use a CSS declaration transform:scale(n)
to emulate scaling through browser settings (e.g. ctrl
- +
, ctrl
-, -
or ctrl
- mousewheel
). This works in Webkit browsers, but Firefox expands the page down beyond the visible height and displays the scroll bar.
When reduced to the minimum case, the page structure looks like this:
<body>
<div id="middle-col">
This is the middle column.
</div>
</body>
CSS
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;
}
When magnified to 80%, the following settings are applied:
body.scale80 {
-webkit-transform: scale(.8);
transform: scale(.8);
width: 125%; /* 100/.8 */
height: 125%; /* 100/.8 */
}
How do I avoid the vertical scrollbar that appears in Firefox?
This same page renders correctly in Firefox (= no scrollbars) when using ctrl
- +/-
.
- Static example: http://jsfiddle.net/qf1vjauj/1/
- Dynamic example: http://jsfiddle.net/8uqk1med/3/
Note: This is a special case design. I appreciate that in general, page zoom should be left as a user choice.
source to share