1

I have a slideshow effect where you can use translateZ to animate images in and out from the bottom and top of the screen.

In my tests using ie10, 11, translateZ does work but because of its lack of support for 'transform-style: preserve-3d', with nested 3d transformed elements, the effect looks like its scaling up in size instead of moving up or down off screen.

To get around this I've decided to force the effect to use translateX & Y instead if ie10 or 11 is detected and if ie9 is detected turn the effect off completely.

So I am looking for an efficient and trustworthy way to handle browser detection for ie9, ie10, ie11 in jQuery.

Also I'm a bit confused by Internet Explorer's 'edge' version, how is this different than ie11 and does it support transform-style: preserve-3d, can't seem to see 'edge' version on caniuse.com

thanks

Benjamin
  • 697
  • 1
  • 8
  • 32
  • 1
    "IE Edge" = "IE 12" (or whatever versions and revisions come after "11"). It's a fancy product name for the version of IE shipped in Windows 10. It should be able to do 'everything' IE 11 can.. Not sure when product matrices will start to diverge.. and it should not be confused with the "IE=edge" X-UA-Compatibility setting.. – user2864740 Aug 30 '15 at 02:27
  • 2
    Don't use browser detection, use feature detection: http://modernizr.com/ – zzzzBov Aug 30 '15 at 02:31
  • I provided the reason why I need browser detection instead of feature detection, you need to reread my question. Modernizr will still return true for css3dtransforms in ie10, 11, but like I stated the effect doesn't look very good. – Benjamin Aug 30 '15 at 02:46
  • @user2864740 it's not "IE Edge", it's not IE 12, it's just Edge, it's an entirely different browser. – dmeglio Aug 30 '15 at 03:04
  • 3
    In Modernizr 3 (currently beta) you can do `Modernizr.addTest('preserve3d', Modernizr.testAllProps('transformStyle', 'preserve-3d'));` then `Modernizr.preserve3d` would do what you want. – dmeglio Aug 30 '15 at 03:16
  • 1
    @dman2306 although you are correct that Edge is a new browser, it was "born out of the ashes" of Internet Explorer and has brought over some rendering engine parts from IE... including some of the buggy parts ;-) See section (c) of this answer http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown/570651#570651 – scunliffe Aug 30 '15 at 03:35
  • @scunliffe so Chrome is really just Safari since it's based on WebKit? And Firefox is just Netscape Navigator because it's based on Mozilla? Edge isn't IE anymore than those two are their predecessors. – dmeglio Aug 30 '15 at 04:09
  • 1
    @dman2306 I'm just saying that "it's an *entirely* different browser" is a questionable statement. Edge is the new evergreen browser from Microsoft built for HTML5 and beyond. Expect it to get better and better and compete on par with other modern browsers. However it was built on top of IE's beginnings, supports the same internal vendor naming that IE did via the "ms" prefix, and includes rendering behaviour (bugs/features) from previous Windows8+/IE versions. – scunliffe Aug 30 '15 at 04:32

3 Answers3

2

If you just want to detect IE11 and below to serve up something else you could use this:

if(navigator.userAgent.indexOf('Trident') != -1){
  //This is Internet Explorer 11 or below
  //If you need to know if this is IE9 or above also you can run this
  if(typeof(document.addEventListener) != 'function'){
    //This is IE8 or below
  }
  if(typeof(window.msIndexedDB) != 'undefined'){
    //This is IE10 or higher
  }
}

However many will suggest that you should use feature detection instead (where possible - however I'm not sure if you can (easily) in this case)

You can keep tabs on which browsers support this feature on CanIUse.com

scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • Thanks scunliffe, is there a way to break this down further to separate the different versions. I guess I could have done a better job of explaining my problem, but feature detection isn't going to work for me because ie10 and 11 do have the 3d transform feature but the implementation is lousy, so I need to target those browsers specifically – Benjamin Aug 30 '15 at 02:58
0

I found this solution and believe for now this should be considered the correct answer:

IE9-11 detecting transform-style: preserve-3d

It adds feature detection for transform-style: preserve-3d. The lack of this feature in ie10 & 11 makes, translating along the Z axis, behave not as expected. 

var detect = document.createElement("div");
detect.style.transformStyle = "preserve-3d";
if ( !detect.style.transformStyle.length > 0 ) {
    $('html').addClass('no-preserve3D');
}

In the future it looks like Modernizr 3 will have feature detection for transform-style: preserve-3d but is currently in beta...thanks dman2306 for that tip!

Community
  • 1
  • 1
Benjamin
  • 697
  • 1
  • 8
  • 32
0

There are some good solutions for a related question here: IE10 and below Browser detection

I found a great CodePen with a complete solution for all versions of IE and Edge:

https://codepen.io/gapcode/pen/vEJNZN

From the link, here are examples of the various values of window.navigator.userAgent:

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';
theUtherSide
  • 3,338
  • 4
  • 36
  • 35