CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 34034

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

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.

Upvotes: 2

Views: 1450

Answers (3)

Troy Alford
Troy Alford

Reputation: 27256

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.

  1. 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).

  2. 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.

  3. 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.

Upvotes: 2

Kevin Hakanson
Kevin Hakanson

Reputation: 42220

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.

Upvotes: 1

Christoph
Christoph

Reputation: 51241

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.

Upvotes: 2

Related Questions