-o-transform / oTransform not updating in Opera

[TrySpace]

-o-transform is not working in opera somehow, when put into style as object, in Chrome, FF and IE10 this works fine, it's the latest Oprea.

I give each element:

        webkitTransform :   transform,
        mozTransform :      transform,
        msTransform :         transform,
        oTransform :        transform,
        transform :     transform,

And rotate the deg programmatically ( var transform = rotate( 45deg ) )

When I inspect the element in Opera dev tools I see all cross-platform tranforms applied to style (-ms, moz etc), while in Chrome only ones with -webkit and without are actually applied.

And another strange thing, the -o-transform , is actually o-transform, so without leading hyphen. But worse of all, the rotate value I change/animate, don't change at all, I see the code running through the console, but it just doesn't update the style object..

[zpao]

This isn't super well documented, but you need to use OTransform (as well as WebkitTransform, MozTransform. msTransform is a special case because MS did something different). This is because we're setting styles vis JS. Same reason you must specify other styles as camelcased, eg backgroundColor. Can you update your code and report back if that fixes things?

Read more: http://www.andismith.com/blog/2012/02/modernizr-prefixed/

Also, fwiw, latest Opera is now built on blink. Did they maintain the -o- prefix? I would have thought they just picked up the -webkit- one...

[sophiebits]

Maybe we can warn for this.

[TrySpace]

OTranform fixed the hyphens, but not the issue,

However: the style object still does not update.. It does update, just not the transform. So height, width etc. are updated.

I start with: #1
position:fixed;left:66px;top:66px;width:66px;height:66px;z-index:6;-webkit-transform:rotatex(0deg) rotatey(0deg);-moz-transform:rotatex(0deg) rotatey(0deg);-ms-transform:rotatex(0deg) rotatey(0deg);-o-transform:rotatex(0deg) rotatey(0deg);transform:rotatex(0deg) rotatey(0deg);webkit-transition-timing-function:cubic-bezier(0.55, 0, 0.1, 1);moz-transition-timing-function:cubic-bezier(0.55, 0, 0.1, 1);-ms-transition-timing-function:cubic-bezier(0.55, 0, 0.1, 1);-o-transition-timing-function:cubic-bezier(0.55, 0, 0.1, 1);transition-timing-function:cubic-bezier(0.55, 0, 0.1, 1);webkit-transition-property:all;moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;transition-property:all;webkit-transition-duration:0.3s;moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;webkit-transition-delay:0s;moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;

And for some reason, after updating height or width in the style object i'm left with: #2

       `position: fixed; z-index: 6; transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); transition-property: all; transition-duration: 0.3s; transition-delay: 0s; left: 80px; top: 80px; width: 80px; height: 80px;`

And weirdly, when I'm actually updating the transform, it stays like #1, as if I didn't update the style object, but when the height or width change, it does change, and I'm left with #2

This is ONLY on Opera, so the object stays intact/correct like #1 with updated deg values in Chrome, FF and IE10

[TrySpace]

I think there might be some bug in the diff algorithm? on Opera?

Also translateX with capital X doesn't help