CSS3 transitions do not work on IE8 [#1863966]

Hi. I am new to Modernizr, I read the documentations, installed it and created my custom .js build selecting CSS Transitions (also tried selecting all options). I do have Libraries module, so I put my modernizr.min.js to sites/all/libraries/modernizr/ and Status report shows that Modernizr is loaded, it is also loaded first in the source, right before jquery .js and the rest of avalable .js files.

All I want on IE8 is to make the transition work:

.view-top-menu ul li .views-field-field-link a {
  color: #FFF;
  display: block;
  line-height: 53px;
}
.view-top-menu ul li .views-field-field-link a:hover {
  background: #006862;
  text-decoration: none;
  -moz-transition-property: background;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: background;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: background;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: background;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: background;  /* Standard */
  transition-duration: 1s;
}

It works on FF, Chrome and Opera. What it does is when you hover your Mouse over a link, the background smoothly transfers to the set background color in the CSS. In IE it currently doesn't transfer, it changes in a blink (by default).

Like I said, I am new to this and maybe I am missing something?

Comments

Comment #1

tamasd CreditAttribution: tamasd commented 17 December 2012 at 08:53

Status:

Active

» Closed (works as designed)

Modernizr is for detecting HTML5/CSS3 features, not for implementing it in older browsers.

What you can do is to use the CSS selectors, and either supply an alternative CSS or use JavaScript where the feature you wanted is not available.

Comment #2

rupl

he/him

English

CreditAttribution: rupl commented 8 February 2013 at 16:41

Yorirou is correct. Modernizr is designed to detect features only, with little part in implementing a solution to provide missing ones. The minor role it can play is providing an easy way for loading a polyfill to provide the functionality. Simply use the Modernizr.load() API available within the module. You have two options:

Within your theme's info file

modernizr[Modernizr.csstransitions][nope][] = path/to/your-script.css

Within your theme's template.php file

For more info see hook_modernizr_load() examples inside modernizr.api.php

function MYTHEME_modernizr_load_alter() {
  $load = array();

  $load[] = array(
    // Test the user's browser for CSS Transitions.
    'test' => 'Modernizr.csstransitions',

    // If the test FAILS load these files. Example shows a Drupal path (don't
    // forget opening slash, or it won't work except at your site root)
    'nope' => array('/'. drupal_get_path('theme','MYTHEME') .'/path/to/your-script.css'),

    // The final 'complete' callback requires an anonymous JavaScript function.
    // Take care to format correctly. Despite being inside an array, you should
    // only add one function.
    'complete' => array('function(){  /* put any initialization code right here */  }'),
  );
}