Visual bugs with WebKit-based browsers in OS X.

[clemens]

We're using the latest version of your cool plugin but we're experiencing some visual bugs in WebKit-based browsers on OS X.

The issues can be easily reproduced on the standard demo page (http://slidesjs.com/examples/standard/). Just add style="-webkit-transform: rotate(12deg)" to the paragraph containing the license information. Then, if you use the slide pagination, the following visual bugs occur:

• Chrome and Safari: The text jumps slightly and becomes blurry while the transition happens.
• Chrome only: The left border of the ad banner disappears while the transition happens. We have the same effect for some images on our page.

When using the fade effect instead of slide, we don't have any issues. I can't reproduce this with Chrome on Windows or Firefox on OS X, so I'm assuming this is an issue specific to OS X and WebKit.

Versions used:

• OS X 10.8.2 with all current patches
• Safari 6.0.2 (8536.26.17)
• Chrome 25.0.1364.160

If you need any other infos, let me know.

[nathansearles]

WebKit can do some really funky things when using CSS transitions. I've seen this and many other issues. Unfortunately these issues are apart of WebKits rendering.

[clemens]

In our case, it would help to have an option to disable CSS transitions and use the JavaScript fallback that you use for browsers without support for CSS transitions. I've just checked on our page and there are no weird text rendering issues with the JavaScript method.

I'm thinking something like "transitionMode" with potential values "auto" (= the current behavior), "css" (only allow CSS transitions) or "javascript" (only allow JavaScript transitions).

What do you think? Should I provide a pull request?

[nathansearles]

Yeah that makes sense. I'll make CSS3 Transitions an option in the next update.

[POPSuL]

Do you have any news about the next update? I'm waiting a transitionMode option because I have a similar bug on my websites. Page content (images, paragraphs, etc...) jumps up and down within Chrome which slides automatically scrolls. Also within Safari (MacOSX) changes color (saturation) of the text.