Why does transform: scale(xx.y) change from Browser to Browser

Question

[SOLVED - solution described way below]

#mycontainer {
   margin: 0 auto;
   width: 30em;
}

This mark-up centers.

So, later,

$('#mycontainer').css("-webkit-transform", "scale(0.8)");
$('#mycontainer').css("-moz-transform", "scale(0.8)");
$('#mycontainer').css("-ms-transform", "scale(0.8)");
$('#mycontainer').css("-o-transform", "scale(0.8)");
$('#mycontainer').css("transform", "scale(0.8)");

The markup does not change, just the "appearance", i.e., it "appears" scaled down.

Is all the above accurate?

And, if so, how do I portably center the object and stop there?

From my testing, Safari does what I want with the code above, whereas the other Browsers also shift the scaled-down object to the right, which is not what I want.

In direct response to your valid comments, here is a jsFiddle to more completely illustrate my point: http://jsfiddle.net/johnlove/yL2td3r2/

But, before you peek at this jsFiddle, let me verbally try to explain what I'm trying to do.

I start out with the standard css for centering a division. Then, I hook a resize method into the window's onresize Event. And in that Event, I want to keep the division centered and scale down with the transform center at its default center (50,50); e.g., for scaling to 0.8, that means bringing in the left edge 10% and the right edge 10% keeping the center the same (50,50).

Sounds simple enough ... BUT, the whole division is shifted ... and shifted ONLY when the enclosing window gets super thin ... the division gets scaled down and remains centered UNTIL the window gets really, really thin.

I remember a line in a very, very, very old movie in which the actor blurts out "I'm fading, I'm fading". Field of Dreams. At this juncture, this sounds like a very appropriate line for me.

Answer 1

This seems... kind of a ridiculous solution. You want an image centered in flow, as big as it can get, but never bigger than the window size? Simply use

.container { 
    width: 100%; 
    margin: 0px auto; 
    max-width: 30em; 
} 

to receive the desired effect without using JS.

The reason you were seeing this is because your were using a set width - which means your container was always 30em wide, and its transform-origin was defaulted to 50% 50%.

So the center point of your container firmly remained at 15em, and it was scaling to that point, which seemed to be more to the right hand side of your screen as your screen size decreased. That's why it appears to go off to the left - your em will always be 30em wide, so the origin is always 15em to the left. The trick is to set the transform-origin to 0 0 - although the above technique is a lot better and simpeler.

Let's fix your code a bit here (I also removed any reliance on jQuery as this is really not hard in vanilla JS, and removed the ul - this is just for simplicity as it makes no difference to the final result in this case):

window.addEventListener('resize', function(){

    var theScale = 0.7 * window.innerWidth / (480 + 9.6);
        theScale = theScale > 1 ? 1 : theScale;
    
    var theContainer = document.getElementById('container');
    
    theContainer.style.msTransform = "scale(" + theScale + ")";
    theContainer.style.mozTransform = "scale(" + theScale + ")";
    theContainer.style.webkitTransform = "scale(" + theScale + ")";
    theContainer.style.oTransform = "scale(" + theScale + ")";
    theContainer.style.transform = "scale(" + theScale + ")";

}, false);

body {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    width: 30.00em;
    height: 22.50em;
    border: 0.30em solid #cd853f;
    overflow: hidden;
   -webkit-transform-origin: 0 0 ;
   -moz-transform-origin: 0 0 ;
   -ms-transform-origin: 0 0 ;
   transform-origin: 0 0 ;
}
#container img {
    /* match specs to #container */
    width: 100%;
    vertical-align: middle;
}

<section id="container">
<img src="http://lovesongforever.com/My_Love_Song_Forever_Folder/50_images/Nancy_and_John.jpg" alt="At Entrance of CP" />
</section>

However, heres my simpeler solution:

body {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    width: 100%;
    max-width: 30.00em;
    height: 22.50em;
    border: 0.30em solid #cd853f;
    overflow: hidden;
}
#container img {
    width: 100%;
    vertical-align: middle;
}

<section id="container">
<img src="http://lovesongforever.com/My_Love_Song_Forever_Folder/50_images/Nancy_and_John.jpg" alt="At Entrance of CP" />
</section>

Answer 2

Thursday, October 22

Here's the solution I promised ...

1) everyone, absolutely everyone who posted above contributed ... everyone.

2) however, special gratitude goes to both "Abhitalks" and "somethinghere".

(a)"Abhitalks" said

"This seems to be an XY problem".

This "biggee" from Abhitalks turned on the 1st light bulb because when the window became super tiny, and only then, did the #container jump over to the right. It's obvious I wanted a padding left/right = 15%. So ... I put that padding spec in <body>.

(b) "somethinghere" turned on the 2nd light bulb when he said

"So the center point of your container firmly remained at 15em, and it was scaling to that point, which seemed to be more to the right hand side of your screen as your screen size decreased. The trick is to set the transform-origin to 0 0"

So ...

body {
    padding: 0em 15%;
}

and hooked into my resize routine:

var theScale = 0.7*windowWidth/489.6;

if (theScale > 1.0)
{
    theScale = 1.0;
}

/*
    For the sake of speed all transform-origin
    specs are actually in #container's css.
    See the redone jsFiddle below.
*/

theContainer.css("transform-origin", "0 0");
theContainer.css("transform",
                 "scale(" + theScale + ")");

Look at my updated jsFiddle at http://jsfiddle.net/johnlove/yL2td3r2/

A sense of euphoria has erupted ... together with "Oh my ... what am I going to do now?"