Hello
I am trying to scale up an entire html page by using the following css below:
body {
zoom: 1.2; /* IE, Chrome, Safari */
-moz-transform: scale(1.2); -moz-transform-origin: 0px 0px; /* firefox */
}
This works great on Safari and Chrome on windows and mac.
However IE on Windows 8.1 seems to be behaving just like Firefox on Windows and Mac. It does scale the entire page and graphics and fonts as if you use the zoom function in the browser interface itself, however no matter how large you make the browser window the right side 200 px about are always cut off and need to be scrolled to.
Why can't there be one set of CSS that just works for stuff like that. I mean the site has an older design and looks small on modern computers / monitors with greater resolution. So all it needs is take the entire web page and make it about 20% - 50% larger. Again, on Safari or Chrome everything looks super with zoom: 1.2; However zoom:1.2 on IE, and the -moz-transform and -moz-transform-origin does the enlarging part fine, but now there are about 200 or so pixels past the right edge of the browser window no matter how wide I scale the browser window, and you need to scroll to the right to see that part of the page. Is there a fix for that, or can you please fix that?
Thank you,
MrLerch
Problems with -moz-transform: scale and -moz-transform-origi
-
- New Member
- Posts: 1
- Joined: April 28th, 2015, 10:23 pm
- trolly
- Moderator
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: Problems with -moz-transform: scale and -moz-transform-o
Example page?
Did you also try without the -moz prefix?
Did you also try without the -moz prefix?
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Problems with -moz-transform: scale and -moz-transform-o
Firefox 16 and later no longer use require the -moz prefix. https://developer.mozilla.org/docs/Web/ ... patibility
Actually, that does not address the question, since transform and -moz-transform seem to operate the same.
Actually, that does not address the question, since transform and -moz-transform seem to operate the same.
Last edited by jscher2000 on April 29th, 2015, 6:15 pm, edited 1 time in total.
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Problems with -moz-transform: scale and -moz-transform-o
Scaling the body element to 120% of its default width really only makes sense with a page that has a narrow-ish fixed width. If the body fills the entire window (viewport) already, then scaling it up by 20% will cause it to stick out 20% beyond the viewport and require horizontal scrolling. You could compensate for that by widening the right margin.
Along those lines, you could experiment with this:
Note: I don't know what effect, if any, that has in IE 10-11, which apparently supports transform.
Along those lines, you could experiment with this:
Code: Select all
body {
transform-origin: left top; /* Expand page right and down instead of in all directions */
transform: scale(1.2); /* Scale (zoom) body 20% */
margin-right: 16.67%; /* Contract width of body by 20/120 to avoid horizontal scrolling */
}
Note: I don't know what effect, if any, that has in IE 10-11, which apparently supports transform.