Firefox Flickering

[bahamagician]

I have a slider that plays automatically. However, on Firefox, during the first loop through the slider, the images flicker quite a bit. It even happens on the Custom Controls page on the demo site. If you visit that page in Firefox and hit the play button, you'll notice that the images flicker during the first run through:

http://www.360slider.com/custom_controls.html

Any ideas what I can do to fix this?

[Igloczek]

Just remove width change in CSS files

.threesixty .threesixty_images img.previous-image {
  visibility: hidden;
}
.threesixty .threesixty_images img.current-image {
  visibility: visible;
}

[bahamagician]

That's awesome. That fixed it. Thanks man!

[aleksandarveljanov]

Hello guys,
I have a problem with flickering on firefox. I have just noticed that the problem with the flickering occurs only in firefox version 40 or above (they must have included something which makes these problems). The images flicker on first run and sometimes after several time. I've tried putting this in my css:

.threesixty .threesixty_images img.previous-image {
visibility: hidden;
z-index: -999;
}

But no use, after a while it began to flicker again. Please respond if you have any update on this issue. Thanks

[Igloczek]

42.0 on OS X 10.11.1 works fine, any signs of flickering.
@aleks989 Can you check this link on your browser? (select "3D" at gallery to turn on 360 view)

[aleksandarveljanov]

I didn't noticed flickering in the link you sent me (tested it on Windows 7 with Firefox 42), but I do get the flickering with this:

http://www.360slider.com/custom_controls.html

Try to drag it with the mouse left and right and you'll notice it. I also tested in on Mac with OSX 10.10.4, but the flicker is still there. Sometimes it doesn't occur right away, if you leave it idle for a while, change tabs and then come back and start spinning you'll see the flickering.

[Igloczek]

So, my fix woks fine, as expected.
Demo page have probably default styles, without fix.
Flickering ocours, because it is to many of CSS rules to recalculate and then repaint, in short time.

[aleksandarveljanov]

You can check this version here as well:

http://steelcase.cylindev.com/viewer/v2.1/test/TestoutRequire.html

It's with no styles at all, only few are kept on the threesixty.css, but the problem remains. I think the flickering is probably connected with Firefox's new version. It probably clears or deletes the images cashe in some way and then loads them again. If you know of anything that might solve this or you have any insight as to what could be changed in the plugin to make it work, then please let me know.

Thanks.

[Igloczek]

Did you read second comment in this topic?

Your styles contain unnecessary CSS changes (z-index and opacity), witch probably causes browsers to massive recalc / repaints.

As you see, my page with proper CSS works perfectly fine.

[aleksandarveljanov]

Even with the appropriate changes on the threesixty.css, you can still notice the flickering on Firefox, I have even noticed it on the link you sent me above (the one with the shoes). After some times passes (say 5-10 min.) and you start dragging it around, you can see it very well. Sorry, but the fix doesn't work.

http://steelcase.cylindev.com/viewer/v2.1/test/TestoutRequire.html

If you check this again (no opacity or z-index, removed those) it's still the same. I don't know if this can be accepted as a known issue, but Firefox clearly has something changed which causes this flickering to happen. Let me know on your thoughts with this.

[nesic998]

Hey guys! I had same problem. I tried with disabling width but it didn't help. I used visibility as a property. Opacity fixed my problem so you can try this.