Event transitionend isn't triggered on Safari 7.0.2 & Safari 6.1

Question

I got a problem that my product's codes bind event transitionend to a element. But this event isn't triggered on Chrome 33, Safari 7.0.2 & Safari 6.1. My codes can work fine on Firefox 27.0.1. My codes used to work well on Chrome's old versions like 25 and Safari's 6.0.5.

So I started to reproduce this problem. The following are reproducing codes:

<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

document.querySelector('.box').addEventListener('webkitTransitionEnd', function () {
    console.log('Transition End.');
}, false);

document.querySelector('.box').addEventListener('msTransitionEnd', function () {
    console.log('Transition End.');
}, false);

document.querySelector('.box').addEventListener('oTransitionEnd', function () {
    console.log('Transition End.');
}, false);

document.querySelector('.box').addEventListener('transitionend', function () {
    console.log('Transition End.');
}, false);

jsFiddle: http://jsfiddle.net/PPRJX

The reproducing codes can't work on Safari 7.0.2. But they can work on Chrome 33.

I wanna let my codes work on latest Chrome and Safari. From my reproducing codes, you can see transitionend doesn't work on Safari and work on Chrome. But on my product, it also doesn't work on Chrome.

Thank you very much!