• Registered: 2013-11-02
  • Posts: 8

Topic: Page flickers on next image load

Using JBB 133 with LR5.2 on Win8.2.

Images are flickering on load when fwd/back nav is clicked (or keyboard). Pre-load was initially set to Page and I wasn't getting this issue, then I changed it to Next thinking that would speed up initial 1st image load as the page doesn't wait for the whole gallery coming into cache. Images then started to flicker once on load. I changed the parameter back to Page, still flickering.

I probably changed other stuff too, trying to fix it, but can't remember what parameters. Aside from the other two posts I made earlier this is the only problem I have.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

What device(s) and/or browser(s) do you see this problem in?

Please post the URL to your gallery so that I can take a look for myself and hopefully help further.
Thank you.

  • Registered: 2013-11-02
  • Posts: 8

Re: Page flickers on next image load

Hi Steven,

Just tested this on IE 11 and there is no image flicker on load. On Chrome v30 it is happening. It not the full page the flickers, just the image so I'm wondering if has something to do with the Button Bar, but only on Chrome. I'm not testing on any other device, its PC only.

http://www.brianwilsonphotographer.com/ … -portfolio

Regards,

Brian

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

I see the flickering in Chrome 30 when I view your gallery on this page: http://www.brianwilsonphotographer.com/ … -portfolio
It is the whole gallery that flickers (not just the main image in the gallery).

However, there is no flickering when I view the gallery on its own index page: http://www.brianwilsonphotographer.com/ … index.html

It looks like there may be a problem with your iframe code.
Try validating your web page with the W3C Markup Validation Service and fix the errors reported. There are 4 errors on the page and 3 of them refer to the iframe into which the gallery is loaded.

Also, try temporarily removing the onload="iFrameHeight()" attribute from your iframe to see if this makes a difference.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Steven,

I've just started using slideshows on load and I'm having this exact problem.  I'm running MacOS 10.10 and Safari 8.

I'm not seeing the problem with Chrome on this same Mac, but am having the same issue on another Mac running 10.10.  However, I'm not seeing it with yet another running 10.9.

Can you confirm if possible, that this is NOT a Juicebox issue?

Using W3C validation service throws up a LOT of errors with my code ... most of which seem to be in Juicebox's embed code.  I don't really understand what I'm looking at here, so any help you can offer will be most welcome.

(This site is still in test phase, so may be changing but the galleries are now pretty much set ... http://www.grantsymon.com/test/e/start.html)

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

@gfs

Can you confirm if possible, that this is NOT a Juicebox issue?

Do you see the problem with any of our demo galleries on this web page?
If so, then please let me know.
If not, then it is possible that your problem is unique to your own web page (and the code within it).

Using W3C validation service throws up a LOT of errors with my code ... most of which seem to be in Juicebox's embed code.

Juicebox generates valid HTML 5 code and your embedding code looks OK. The problem you are seeing probably originates from putting your embedding code inside <p> and <span> tags, some of which also seem to have no closing </p> tag. (Inline elements such as <p> and <span> tags not contain block elements such as <div> tags.)

I would start by fixing the errors on your web page. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Even if this does not solve your problem, we can at least then eliminate HTML errors from being the cause of your problem.

Most of the errors on your web page seem to be due to stray end tags and unclosed elements.
Unfortunately, not being familiar with your web page's layout and with your web page's code not being indented, it is hard (at a glance) to see where containers should be opened and closed.

Try not to be overwhelmed by the errors on your web page. (There are not actually that many but most of them seem to be related to the layout rather than syntax errors or typos.) Just go through them one by one. Each one you fix is a step closer to a valid web page. If you see an error such as "Stray end tag.", then it is possible that there may be no corresponding opening tag and the stray end tag can just be removed. If you see an error such as " Unclosed element.", then try to figure out what it is you want within the tag and that should lead you to where the closing tag should be.

I hope this helps.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Thanks Steven.

I have made a test gallery with just one page and with *nothing* on the page other than the Juicebox gallery.  I am still seeing this stutter, but am also still seeing errors in the Juicebox code.

I've made the code more readable.  Perhaps you could have a look?

http://www.grantsymon.com/testBugs/index.html

I don't see the problem with your test page galleries, which makes me wonder if it is something to do with the version 1.4 responsive galleries and the associated image sizes, or possibly, the choice of images.

(Of course, it could well be a bug with Safari and I have reported it to the Appleseed program, so I'll see what they say.)

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

Juicebox generates valid HTML 5 code so if you are getting errors on your web page relating to Juicebox code, please try using the HTML 5 Doctype Declaration on your web page (and ensure that the other code on your web page is HTML 5 compliant).

<!DOCTYPE HTML>

I do not see the problem in any browsers on my PC.
Please take a look to see if the problem occurs in this test gallery. It uses the same configuration options that your own test gallery uses but the web page itself uses the HTML 5 DTD and is created by JuiceboxBuilder-Pro with no custom code on it.
If you still see the problem in this gallery, then it may be due to an incompatibility between certain configuration options and Safari 8 (perhaps imageTransitionType="CROSS_FADE" or imageTransitionTime="1.5"). Try using the default values of imageTransitionType="SLIDE" and imageTransitionTime="0.5" to see if this makes a difference.
Please let me know how you get on so that I can log a bug report with the developers if necessary. Thank you.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Thanks Steven.  I've come to the conclusion that this is indeed bug in Safari/MacOS.  Hopefully Apple will do the right thing. :)

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

Even if the problem is only with a certain browser, we would still very much like to track the problem down.

If you have the time, I would be grateful if you could please confirm whether or not you see the problem in my test gallery (which is a gallery straight out of JuiceboxBuilder-Pro but using the same configuration options that your own test gallery uses).

The fact that you do not see the problem in any of our demo galleries suggests that the problem is either with a certain combination of configuration options or with custom code on your own web page. If you do see the problem in my test gallery, then the configuration options used in the gallery may be the cause (and I can then log a bug with the developers if necessary).

Thank you.

11 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Steven,

I've uploaded a screen-movie of the problem with your test site.  I've also shown the problem with my own site.  I *think* they may be the same problem, in that the image is loading *twice*.  It could be that my site is loading faster for some reason, so it looks like a 'flash' or 'flicker' instead of a re-load.

Also, by chance I have increased the time delay on my slideshows from 3 secs to 4 and it *appears* that this *may* have reduced the frequency of the flicker (which doesn't happen with every image load).  But this is hard to judge.

http://www.grantsymon.com/Grabs/GFS-JBx … deShow.mov

http://www.grantsymon.com/Grabs/JBxTestSlideShow.mov

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

Thank you very much for the additional information.
I have been able to replicate the issue and see the problem in test galleries of my own.
It seems to affect all WebKit based browsers (Chrome, Opera and Safari) but seems to happen only when galleries are hosted on certain web servers (with imageTransitionType="FADE" or "CROSS_FADE").
I have now notified the developers who will investigate further and hopefully find a solution to the problem.

13 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Wow!  Nice work Steven.  That's some pretty intense bug hunting there.

I'll be really pleased when I can publish my galleries, secure in the knowledge that they're being viewed in the best possible way.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

On further investigation, the problem may be related to server-side caching.
If caching is disabled on your web server, then Juicebox will have to download the images every time it needs them (as it will not be able to request them from a cache) and this may be causing the problem.

If you have an Apache web server and have a .htaccess file with an entry such as the following (to disable caching), then please try removing it to see if it helps.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

This may solve the problem.

15 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Steven,

I do have an Apache server (Gandi.fr) but I have not myself, added an .htaccess code for caching.  (There are some .htaccess files in some areas for permissions)

Their support is excellent, so I'll run this by them in a few days time.  Bit crazy at the moment.

16 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Steven,

apologies for slow reply ...

This is what they have said :

______________________________________

Hello,

"Do you think this could be an issue?"

Hard to say. I tried your Website from Iceweasel, Chromium, Opera, and doesn't see the 'stutter'.

Javascript is executed on client side, and server Apache cache is the same for all browser version. If that's happened only on Safari, seems to be related to this software. Maybe a cache settings on this browser.

We have a webaccelerator in front of the instances : a varnish server. That's maybe related to the retrieving images process.
______________________________________

Which type of web-servers have you been able to replicate the issue on Steven?  Any browsers other than Safari 8.x ?

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

I was able to replicate symptoms similar to those described above (a flickering/double-loading effect) on an Apache server using the following line of code in an .htaccess file.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

As soon as the code above was removed from the .htaccess file, the flickering disappeared.
The flickering occurred only in browsers which use the WebKit engine (Chrome 39, Opera 26 and Safari 5.1.7 on PC) and not in other browsers (Firefox 34.0 and IE11).

18 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Have you access to a Mac running Yosemite?  Could you check on that, for a site hosted on another server?  (Without using the .htaccess code, which is definitely not on my site.)

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

Have you access to a Mac running Yosemite?

No, unfortunately not.

At the moment, when viewing your test gallery (http://www.grantsymon.com/testBugs/index.html) I do not see the problem in any browser but the HTTP header from your web page does include the following:

Cache-Control: no-cache

If you do not have this set via an .htaccess file on your web server, then please contact your web host and ask them if they could remove the 'no-cache' setting from your web hosting account.

Hopefully this will solve your problem.

20 Reply by gfs (edited by gfs 2015-01-31 15:39:16)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Steven,

it's taken a lot of time of coming and going with my host's tech support, but essentially, the say it's a Safari bug.  I'm wondering if you agree, or if it could in fact be a Juicebox problem?

"I make some connection tests, and cache is well used :

curl -I www.grantsymon.com
HTTP/1.1 200 OK
Server: Apache/2.4.10
Last-Modified: Tue, 06 Jan 2015 22:43:32 GMT
ETag: "1471-50c0389613561-gzip"
Content-Type: text/html
Vary: Accept-Encoding
Date: Fri, 30 Jan 2015 09:14:49 GMT
Connection: keep-alive
Via: 1.1 varnish
Age: 7

By the Varnish server in front of your instance. But I'm not convinced that's the cause. And that's a matter on browser side.

According to the fact this trouble occurs only with Safari 8, I think that may be related to plugin version of this browser.

I tried with a Safari 8 without having trouble.

You can use this Website to check you plugins version :
https://www.whatismybrowser.com/

But I'm affraid I can't help you more : trouble is on browser side."

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

The flickering/double-loading problem affects only browsers which use the WebKit engine (Safari, Chrome and Opera) so you would not see the problem in Internet Explorer or Firefox.

Have you asked your web host if they could/would remove the "Cache-Control: no-cache" header from your web hosting account? I would expect that this would solve your problem.
If they are not willing to do this, then perhaps you could simply work around the problem by using a different imageTransitionType.

Otherwise, if you have access to a different web server which does not set "Cache-Control: no-cache", try uploading your web site there and view your gallery in Safari 8. Again, I would expect that your gallery would function correctly.

(I can replicate the problem myself by adding the "Cache-Control: no-cache" header via an .htaccess file on my own web sever.)

22 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Hi Steven,

so it's NOT specific to my server.  This is on our dsl provider's server.  (Orange are one of the largest telephony companies in EU (probably globally)).

I looked for the cache-control: no-cache setting that you found, but I was unable to find it (I don't really no where to look). Could you post a grab of it?

http://synonyms.pagesperso-orange.fr/test/index.html

If you're seeing it on other webkit browsers, then I guess it may be a webkit bug, but might it still be a Juicebox bug?  I question this again, because I've never seen this on other slideshows.

23 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

Just tried a test with WowSlider and I'm getting the jitters as well. :(

Can I add some code myself via .htaccess Steven, or would the server side code overrule it?

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page flickers on next image load

I've taken a step backwards to reconsider everything here.

I've just viewed both your galleries (http://www.grantsymon.com/e/start.html and http://synonyms.pagesperso-orange.fr/test/index.html) in Chrome 39.0, Internet Explorer 11, Firefox 25.0.1, Opera 26.0 and Safari 5.1.7 and do not see the flickering/double-loading problem in any browser. This suggests that the problem may not be web-server related, although the only way I can replicate such a problem is by adding a 'no-cache' directive to a web server. (This is why I mentioned the Cache-Control header in the first place but if this was the root of the problem, then I should be able to see the problem in WebKit browsers of my own.)

I do not know if tackling this problem from scratch will help, but it might.

Could you please confirm which browsers you currently see the problem in? (Is it only in Safari 8 or also in other browsers, too?)

Do you see the problem in this test Juicebox-Pro v1.4.3 gallery which uses imageTransitionType="CROSS_FADE"?
http://juicebox.net/demos/pro/default/? … nLoad=TRUE
If you do see the problem in this test gallery, then the problem may be related to either Safari 8 generally or perhaps just your own browser. If you have any extensions installed in your Safari browser, try temporarily disabling them. Also, try resetting all your browser settings to their default values.

Please post the URL to your WowSlider gallery and I will let you know if I see any flickering in image transitions in any browsers.
If I do not see any flickering, then the problem may somehow be unique to your own system/setup.

Also, if you like, you could email me one of your galleries and I could temporarily upload it to a different web server to see if this makes a difference. If you are agreeable to this, then please let me know and I will send you an email address where you can send me the gallery.

Maybe tackling this problem from a few different angles will help track down the source of the problem.

25 Reply by gfs

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Page flickers on next image load

OK ... this is quite embarrassing.  It's AdBlock that's causing it!  =:o

I asked some chums, way back, to test on their systems and guess what ... they're running AdBlock too.  In fact, it seems that there are around 40,000,000 people with it installed, so it is an issue for js slideshows.

So I guess I'll contact the developer and point it out.  Do you have any other suggestions from a Juicebox perspective Steven?