Safari OSXEnd transition does not start when tab is hidden

I have two tabs open in OSX Safari in the same window. I have a custom CSS3 transition in the first tab and I subscribed to its onTransitionEnd event. It works fine normally, but when I reload the page and immediately switch to the second tab (it doesn't matter what is in the second tab) the onTransitionEnd event does not fire on the first tab.

To reproduce the problem:

• Open this jsFiddle in Safari tab: http://jsfiddle.net/qzweoL6r/4/
• Wait for a warning, he should tell you that the transition is "over"
• Open another tab such as /qaru.site / ...
• Go to the first tab (jsfiddle) and press RUN and immediately switch to the second tab
• Wait 4 seconds, normally a warning should appear, but nothing
• Switch to the first tab (jsfiddle) and if you don't see the warning in # 4, you should now see it, but nothing else, just the div width changed to a transition value of 400px.

setTimeout(function() {
  $('div').one('webkitTransitionEnd transitionend', function() {
      alert('ended');
    })
    .addClass('active');
}, 2000);
      

        
        
        
      

    

div {
  width: 200px;
  height: 200px;
  background: #f00;
  transition: all 2s linear;
}
div.active {
  width: 400px;
}
      

        
        
        
      

    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div></div>
      

        
        
        
      

    

Do you have an idea how I can fix this problem using JavaScript?