Pickadate breaking -ms-transform in IE9?

I'm having trouble finding a solution to this problem. I have pickadate active on my page. The page also includes a off-canvas navigation. In Chrome, Firefox and Safari everything is working fine. But in IE9 the navigation in not working since I have implemented Pickadate.

I was able to narrow it down to pickadate - when I strip everything else (css and js - only pickadate, the offcanvas toggle and jquery) the issue persists.

Anyone here who may help or point me in a certain direction? I tried finding a solution, but don't know any further.

The interesting things I found:

The pickadate inputs and container are placed within another panel that I can toggle with jquery's add / removeClass('hide'). When the panel is hidden the issue won't occur. In my effort I have also placed the inputs directly in the body to remove the panel from the whole equation. But still the same.
When I comment out the following line in my off-canvas css the issue won't occur (but the off-canvas sidebar is not positioned correctly):

.site-effect.site-menu {
    // -ms-transform: translate(-$offcanvas-navigation-width, 0);
    -webkit-transform: translate(-$offcanvas-navigation-width, 0);
    transform: translate(-$offcanvas-navigation-width, 0);
}

Any help is much appreciated!

Here's the html, css and js I use for my off-canvas navigation:

<body>
    <div class='site-container site-effect'>
      <div class='site-pusher'>
        <div class='site-menu site-effect'>
          <!-- This is the sidebar itself) -->
        </div>
        <div class='site-content'>
          <div class='site-content-inner'>
             <!-- Contains the toggle for the navigation and also the pickadate inputs -->
          </div>
        </div>
     </div>
   </div>
</body>

$offcanvas-navigation-width: 180px;

*,
*:after,
*::before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.site-container,
.site-pusher,
.site-content,
.site-menu {
    height: 100%;
}

.site-content {
    overflow-y: auto;
}

.site-content,
.site-content-inner {
    position: relative;
}

.site-container {
    position: relative;
    overflow: hidden;
}

.site-pusher {
    position: relative;
    left: 0;
    z-index: 99;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.site-pusher::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.site-menu-open .site-pusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.site-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    [...]
}

.site-menu::after {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.site-menu-open .site-menu::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.site-effect.site-menu-open .site-pusher {
    -ms-transform: translate($offcanvas-navigation-width, 0);
    -webkit-transform: translate($offcanvas-navigation-width, 0);
    transform: translate($offcanvas-navigation-width, 0);
}

.site-effect.site-menu {
    -ms-transform: translate(-$offcanvas-navigation-width, 0);
    -webkit-transform: translate(-$offcanvas-navigation-width, 0);
    transform: translate(-$offcanvas-navigation-width, 0);
}

.site-effect.site-menu-open .site-effect.site-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.site-effect.site-menu::after {
    display: none;
}

var eventtype, reset, show;
eventtype = Modernizr.touch ? 'touchstart' : 'click';
$('body').on(eventtype, '#offcanvas_toggle', function() {
  show();
  return false;
});
$('body').on(eventtype, function(ev) {
  if (!$(ev.target).parents('.site-menu').length && !$(ev.target).hasClass('site-menu')) {
    return reset();
  }
});
show = function() {
  return $('.site-container').addClass('site-menu-open');
};
return reset = function() {
  return $('.site-container').removeClass('site-menu-open');
};

amsul / pickadate.js

Pickadate breaking -ms-transform in IE9? #655