Setting CSS 3 Transition and Transform in Javascript works in Chrome But not in IE 10, FF properly?

Question

I have the following code,

    gallery.css("transition-duration", duration + "ms");
    gallery.css("-webkit-transition-duration", duration + "ms");
    gallery.css("-moz-transition-duration", duration + "ms");
    gallery.css("-ms-transition-duration", duration + "ms");
    gallery.css("-o-transition-duration", duration + "ms");
    //inverse the number we set in the css
    var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

    gallery.css("transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-webkit-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-moz-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-ms-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-o-transform", "translate3d(" + value + "px,0,0)");

which works greate in chrome, andriod, Iphone. But on IE 10(on Mobile) does not work and Firefox works partially. Any way to solve this in Javascript/Jquery?

See the Demo

Update: I think I got the main issue. The main issue is that touch events(touchstart, touchend, touchmove) not work in IE 10 mobile. I have used IE 10 Pointers which is work great for me. Thanks everyone.

The question has already been asked here : http://stackoverflow.com/questions/8143953/css3-alternative-for-translate3d — Brewal, Apr 24 '13 at 10:06
@Brewal that question is 1,5 years old... "Much has changed since you lived here my friend". — Christoph, Apr 24 '13 at 10:24
Explain what "does not work" and "works partially" mean in your case. — Pavlo, Apr 24 '13 at 10:29
@PavloMykhalov, here is the jsfiddle, http://jsfiddle.net/BJmyr/5/ — Imran Qadir Baksh - Baloch, Apr 24 '13 at 12:59

score 2 · Answer 1 · answered Apr 24 '13 at 10:34

2

While Translate3d is still not supported in all browsers, it should work in FF. Atm it's the only browser which supports it without prefix.

IE10 does not support transform-style with preserve-3d, so this might be an issue for you. Nonetheless 3d transforms are possible here.

I suggest you change your tranlate3d to translateX since you only modify the X value anyway. This could already solve your issue. Also in general it is recommended to declare the standard-conform value last (the prefix free form) since this is the preferred notation and not have some proprietary stuff override this.

answered Apr 24 '13 at 10:34

Christoph

50,121
21
99
128

besides the fact that it looks somehow broken it works for me in IE10. (if working means you can swipe through the imagegallery). – Christoph Apr 24 '13 at 13:43
I have tested in Lumia 920(IE 10). It is not swaping. How come this is possible? – Imran Qadir Baksh - Baloch Apr 24 '13 at 13:45
But not in Latest Nokia Lumia 920(IE 10). Please help me – Imran Qadir Baksh - Baloch Apr 30 '13 at 07:16
@user960567 Have you tried changing the `translate3d` to `translate` or `translateX` as I suggested in my answer? – Christoph Apr 30 '13 at 07:37
Thanks. But it does'nt work. I think the plugin which I am using does not touch for Mobile IE 10. From the plugin, `This jQuery plugin will only run on devices running Mobile Webkit based browsers (iOS 2.0+, android 2.2+)` Can we make this to work in IE 10 – Imran Qadir Baksh - Baloch Apr 30 '13 at 08:13
@user960567 I'm truly sorry, but I can't help then. This is way too much code to work through without getting the error. Perhaps try another swipe plugin? – Christoph Apr 30 '13 at 08:17

score 2 · Accepted Answer · edited May 23 '17 at 12:12

One thing which you should definitely keep in mind is the order in which you use vendor-specific prefixes. There is a difference between saying:

gallery.css("transition-duration", duration + "ms");
gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");

and...

gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");
gallery.css("transition-duration", duration + "ms");

As mentioned in this SO question's accepted answer:

Whichever is last out of -webkit-border-radius and border-radius will be the one that's used.

-webkit-border-radius is the "experimental" property - the implementation may contain deviations from the specification. The implementation for border-radius will match what's in the specification.

It's preferable to have the "W3C implementation" used when it's available, to ensure consistency between all the browsers that support it.

With that said - be aware that your current implementation is likely to override the "W3C implemented" version with the vendor-specific experimental property.

On to a more specific answer to your question:

This table may give you a bit more insight into which versions of which browsers claim support for 3d transformation CSS, from version to version.

Internet Explorer

According to this blog article, IE 10 supports full CSS3 3D Transformations (note that IE9 only supported 2-D transforms, and previous versions didn't even support that).
Firefox

As of the fixing of Bug 505115, Firefox claims support of CSS3 3D-Transforms. According to this example page, as well - Mozilla does support the transformations (and even demonstrates doing so if you load that page in Firefox).

Unfortunately, more complicated tests in Firefox fail. See this link for an example of something that works elegantly in Chrome, but not in FF. Partial support, to be sure, but without the animation of the WebKit implementation.

Note: I am using Firefox 20.0.1 in order to test.
Opera

Opera provides this article to describe their support of transforms.

End Result:

Support is coming to the major browsers, but slowly. Future versions claim more full support, but each vendor seems to have a different definition of what "full" means. So - as usual in the web-world... coder-beware... test in multiple environments and see what actually works before trusting the browsers to function properly in accordance with specs.

Your suggestion doen't work for me, Try this on IE 10 http://fiddle.jshell.net/BJmyr/5/show/ — Imran Qadir Baksh - Baloch, Apr 30 '13 at 06:16
It seems the plugin whcih I am using only works in WebKit Browsers, https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues Is there is way to make it work — Imran Qadir Baksh - Baloch, Apr 30 '13 at 07:06
Honestly - probably not, until the other browsers catch up in their implementation of the features. — Troy Alford, Apr 30 '13 at 16:34

score 1 · Answer 3 · answered Apr 24 '13 at 11:11

For Internet Explorer specific details, take a look at the MSDN document about Cascading Style Sheets (CSS) features related to transforms.

Looking at transform-style property, it appears only to support transform-style: flat

The Transform Functions section lists a translate3d() function

This section contains reference documentation for the Cascading Style Sheets (CSS) transform functions that are supported in Windows Internet Explorer. Support for 2-D Transforms was added in Windows Internet Explorer 9, while support for 3-D Transforms was added in Internet Explorer 10.

Setting CSS 3 Transition and Transform in Javascript works in Chrome But not in IE 10, FF properly?

3 Answers3