MozillaZine

Problems with -moz-transform: scale and -moz-transform-origi

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
mrlerch
New Member
 
Posts: 1
Joined: April 28th, 2015, 10:23 pm

Post Posted April 28th, 2015, 10:32 pm

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

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted April 29th, 2015, 2:47 am

Example page?
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.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted April 29th, 2015, 5:45 pm

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.
Last edited by jscher2000 on April 29th, 2015, 6:15 pm, edited 1 time in total.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted April 29th, 2015, 6:13 pm

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:

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest