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

Question

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). 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?

Any clues would be appreciated.

Answer 1

You might want to try it with Safari 4 beta for Windows. As Apple says:

“Safari 4 is the fastest and most efficient browser for Mac and Windows, with great integration of HTML 5 and CSS 3 web standards that enables the next generation of interactive web applications.”

So you might be lucky with Safari 4, just try it.

Answer 2

I haven’t done very much with this sort of thing, but I have seen differences between desktop and Mobile Safari (e.g. http://stackoverflow.com/questions/832099/how-do-i-make-an-element-scale-down-to-nothing-using-a-css-transition-on-the-ipho).

As such, I reckon you need an iPhone or iPod Touch to test with.