rstacruz / jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
http://ricostacruz.com/jquery.transit
7.3k stars 864 forks source link

Perspective broken in Chrome browser #152

Open jjeff opened 10 years ago

jjeff commented 10 years ago

In Chrome ver. 29.0.1547.57 on Mac (current version), 3D transforms don't seem to get any perspective for the first transition that affects them. This is particularly noticeable with rotateX, rotateY, and rotate3d transitions. By "no perspective", I mean that it is the equivalent of perspective: 2000 or more where top/bottom edges stay the same width as original during the transition. Perspective seems to work fine in other browsers, including Safari, so this might be a Chrome Webkit problem.

Oddly enough, the second transition on an element seems to kick in the perspective and everything works alright from there on out. I'm working on a card-flip-animation-style script which does a rotateX: '+=180deg' on a timer. The first time it triggers, there is no perspective. But all following triggers work with the correct perspective.

The following is a test case which shows the problem. However, since the element is reset on mouseout, perspective is broken every time.

    test('Perspective Test', function($box) {
      $box.transition({
        perspective: '20px',
        rotateX: '+=180deg'
      }, 4000);
    });