flicker in chrome

[shobson]

Hi there,

I am getting a flicker happening in chrome when the slides finish their transition from one to another. Now it doesn't happen 100% of the time but it does happen quite frequently. I cant seem to mimic the problem in any other browser.

By the way I am using a Mac OS X 10.6 with chrome.

Thanks

[nicinabox]

• What is your Chrome version?
• Do you see this happening on the demo, or in your own code?
• Is it more of a flicker with the images (kind of patchy?) or more of a stutter?

[shobson]

• Chrome version 18.0.1025.165
• Couldn't mimic it in your demo.
• Its a flicker with the images. So say for instance I transition from "slide 1" to "slide 2" when the transition is done, slide 1 flickers on the screen for a split second then slide 2 comes back and the transition completes.

[nicinabox]

Are you using the jquery animate plugin with it?

[shobson]

Yes, I am using "jquery.animate-enhanced.min.js"

[nicinabox]

Hmm, is your code public somewhere I could take a look at it?

[shobson]

Unfortunately I dont have it displayed anywhere publicly at the moment. The HTML structure is set up exactly like you have on the demo page except I have my bg image in its own div and having that scale with the image to do the fullscreen fluid effect. Check out the effect here (http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php)

Starting to wonder if it has something to do with the CSS I am setting for the background images and if its conflicting with the CSS settings in the JQuery for the slides? Not too sure. Still tinkering around with it to see if I can figure out the issue.

[nicinabox]

Are you using background-size in your css?

Sorry, I misread that. You aren't using a background image. If you move the image out of it's div, does that fix the issue?

[shobson]

I actually structured it the same way you had your demo html laid out (without the div) and I was still getting the flickering happening, so I just left it in.

[bnschmdt]

I had a similar problem, apply this to your background image properties in the css

-webkit-backface-visibility: hidden;

-ms-interpolation-mode: bicubic;

[nicinabox]

There is a set of required css which includes the backface and interpolation rules. This ticket is a little old, but @steveh14, did you solve this, and are use using that css that is provided in the documentation?

[shobson]

Yup, the solution I used a while back was the one that @bnschmdt just posted. Seemed to fixed my issues with the flickering in chrome.

[nicinabox]

Okay, awesome :)

[fabyeah]

Old thread, but wanted to add some info:
For me, this still happens in v.0.6.3 like this:

• Seems to affect Mac OS / iOS devices only
• Only images with class preserve, not background images
• Only on jpgs, not on transparent .pngs, but haven't tested this extensively.

The provided CSS fixed it for me, too. Maybe it should be hardcoaded into superslides. If it is, maybe it's not applied to the preserve class?