Topic: webpage flickers/flashes on chrome

I would like to use your (awesome) juicebox on my gallery. unfortunately the page flashes every time a picture advances or if the mouse hovers over a different frame.

this seems to happen on android and in chrome on desktop. looks fine in IE and Firefox though.

any tips what I can change? here is the page:

http://www.servedhot.net/markus/markus.html

thanks!

Re: webpage flickers/flashes on chrome

The flickering you report seems to happen only when the gallery is loaded into a frame or iframe and is due to hardware acceleration that Juicebox uses.
Hardware acceleration will be disabled in the next version of Juicebox when the gallery is loaded into a frame or iframe to combat this problem. (It will remain for optimal performance when the gallery is embedded directly into the web page.)

In the meantime, a solution would be to embed your galleries directly into your web page (rather than loading them into a frame). You could load each of your galleries into your web page on demand using the single page solution from this forum post.
You could modify the template to suit your own needs, for example changing the header for a side menu.

3 (edited by mark 2014-03-19 03:30:11)

Re: webpage flickers/flashes on chrome

I'm having this problem too - severe flickering in Chrome and less dramatic, but still problematic flickering in Safari.  Works fine in Firefox.  All on OS X.  So far I am using only the unmodified index.html file generated by Juicebox itself.  I really want cross-fade, but failing a workaround, will at this point have to settle for a transition that works right in all browsers.   I can post a link to a test gallery if it helps at all.

Thanks.

Edit to add: I am using Juicebox-pro

Re: webpage flickers/flashes on chrome

@mark

I can post a link to a test gallery if it helps at all.

Yes, please post the URL to your gallery so that I can take a look and investigate further.
Also, please let me know what versions of OS X and Juicebox-Pro you are using.
Thank you.

The issue above affects only galleries loaded into iframes and there is no known issue with flickering in Chrome (or Safari) when galleries are embedded directly into a web page.

Try clearing your browser's cache before reloading your gallery to see if this helps.

Also, make sure that you do not have imagePreloading set to NONE. If the next image in the gallery is not preloaded, then it is possible that the transition may not be as smooth as it could be otherwise.

Do you see the problem in this demo gallery which uses the CROSS_FADE imageTransitionType?

Re: webpage flickers/flashes on chrome

O.K.  I've put the test gallery here for now (please let me know when you've seen what you need to so I can take it down).  If you need it, I can archive the whole gallery and provide a link to the resulting zip file.

I am still using OS X 10.6.8.

I have tried clearing the browser caches but it doesn't help.

imagePreloading is unset, but specifically setting it to "PAGE" or "NEXT" does not help.

The demo gallery you posted a link to works fine for me - I do not see the problem that I am having.

Specifically, what happens is that when transitioning to a new image, the old image seems to fade out properly and the next image begins to fade in but then the image goes completely black for a short bit and then snaps back all at once.  The issue is by far worst in Chrome (33.0.1750.152), less so in Safari (5.1.10) and does not occur in Firefox (27.0.1).

Thanks again.

Re: webpage flickers/flashes on chrome

Thank you for posting the link to your gallery. I see the problem that you report in Chrome 33.
It looks like the problem is somehow related to the gallery being hosted on Dropbox.
I created a sample gallery using imageTransitionType="CROSS_FADE" and uploaded it to a Dropbox 'Public' folder and it also flickers between image transitions. However, I uploaded the same gallery to a couple of different regular web servers and the problem does not occur.
I have notified the developers of this issue but if the problem is with Dropbox and a solution cannot be achieved within the code of Juicebox itself, then the only workarounds at the moment would be to either change the imageTransitionType or to host your gallery on a regular web server.

Re: webpage flickers/flashes on chrome

Do you guys have caching turned on in your advanced hosting options?

I had it turned off and had this problem with safari. Turned it on to 15 min caching and it went away