[webkit-dev] -webkit-transition-property receives unexpected values in Safari 3.1.2 (Windows)

[Sergey V. Mikhanov]

>
> I am developing an iPhone-optimized website and testing it on Safari 3.1.2
>> on Windows. For some elements in the website I am applying implicit
>> animation using -webkit-transition style.
>>
>> So basically, I have elements like this:
>>
>> <div style="-webkit-transition: left 2s linear;">...</div>
>>
>> that sometimes are present in the document from the very beginning and
>> sometimes are loaded from another document and injected in DOM.
>>
>> In the first case animation happens as expected, however when divs are
>> injected using JavaScript, -webkit-transition seems to be ignored (there's
>> no animation).
>>
>
> Transitions are not run when elements are first added to the DOM; they only
> run when style properties change from one value to another value.
>

Yes, I forgot to mention that property is changed from JavaScript code
immediately after injection. I'm executing the code below immediately after
injecting element referred by toPage:

    console.log('Before: ' + fromPage.id + ' -> ' + toPage.id + ' (' +
backwards + ')');
    console.log('F.left: ' + fromPage.style.left);
    console.log('T.left: ' + toPage.style.left);
    console.log('F.transition: ' + fromPage.style.webkitTransition);
    console.log('T.transition: ' + toPage.style.webkitTransition);

    if (!fromPage.style.left) {
        fromPage.style.webkitTransition = '';
        fromPage.style.left = "0%";
        fromPage.style.webkitTransition = 'left 2s linear';
    }

    if (!toPage.style.left) {
        toPage.style.webkitTransition = '';
        toPage.style.left = backwards ? "-100%" : "100%";
        toPage.style.webkitTransition = 'left 2s linear';
    }

    toPage.setAttribute("selected", "true");
    scrollTo(0, 1);
    clearInterval(checkTimer);

    fromPage.style.left = backwards ? "100%" : "-100%";
    toPage.style.left = "0%";

    console.log('After: ' + fromPage.id + ' -> ' + toPage.id + ' (' +
backwards + ')');
    console.log('F.left: ' + fromPage.style.left);
    console.log('T.left: ' + toPage.style.left);
    console.log('F.transition: ' + fromPage.style.webkitTransition);
    console.log('T.transition: ' + toPage.style.webkitTransition);

And this results in having this in the console:

Before: login -> home (undefined)
F.left:
T.left:
F.transition:
T.transition:
After: login -> home (undefined)
F.left: -100%
T.left: 0%
F.transition:
T.transition:

I.e. style.webkitTransition is never defined. Any clues why?


>  Moreover, in the Safari's inspector I could see this:
>>
>> -webkit-transition: condensed 2s linear;
>>
>> What does this "condensed" mean and how could I force usage of the style
>> after injection?
>>
>
> This is a bug, and I believe has been since fixed. I recommend you test
> with a nightly build, or at least the Safari 4 beta.


Thanks for the clue. The tricky thing is that this does not work on iPhone
either and updating Mobile Safari is not that easy.

I looked to the inspector for the case without injection being made, and it
turns out that it also has "condensed" there (and animation is performed
fine in this case).

S.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20090324/b91d6e24/attachment.html>