I have a teeny tiny little issue concerning a jQuery-based slideshow in Opera.
What I am doing is the following. I have a couple of images:
<div id="bg">
<img src="..." />
<img src="..." />
...
</div>
In the JS I am doing the following:
$('#bg img:visible').hide().next().show();
As I wait for all the images to be loaded before building the page this should create a non-noticeable transition from one picture to the next. This works perfectly fine in Chrome, Safari, Firefox and IE. Yet, in Opera I have a pretty long (probably 1/4 of a second) period where I see the (black) background shining through.
I also tried doing this:
$('#bg img:visible').next().show().prev().hide();
but it made no difference so I guess this is a problem of Opera’s engine.
Yet – and although I know this is nit-picking on an advanced level – I’d be interested if anyone encountered this before and maybe knows a workaround or fix?
Thanks!
Opera has a different way and timing of handling when it reflows/renders changes made in JavaScript–basically it tries to update JavaScript changes faster than the other browsers. See Efficient JavaScript from the Opera dev articles. Though I’m surprised that you’re noticing that change. It could be due to the speed of your development machine combined with the size of the images, display driver, etc. What does it do on other machines? What about other versions of Opera?
Depending on your layout, you could try placing the second image under (via z-index) the first, then show() the second (even though it will be covered still at this time), then hide() the first which will then reveal the second that was underneath.