Topic: Strange Thumbnail behaviour

Hi,

I have Thumbnails with rounded corners in my gallery. Every 2-3 seconds they switch back to rectangular and then switch back to rounded corners again - even when there is no interaction or scrolling on the page.



Any ideas?

Thanks!

Re: Strange Thumbnail behaviour

That sounds very strange. As far as I can recall, no-one has reported such a problem before.

Please post a link to your gallery so that I can see the problem myself.

Also, please let me know what browser(s) you see the problem in. The problem might somehow be browser-specific so if you have multiple different browsers installed (Chrome, Edge, Firefox, Opera, Safari), try viewing your gallery in whatever browsers you have available to see if it happens in them all. Thank you.

In the meantime, try clearing your browser's cache before reloading your gallery's web page to see if this makes a difference.

Also, make sure that you are using the latest version of Juicebox-Pro (v1.5.1) just in case a bug from a previous version which has since been fixed is contributing to your problem. If necessary, full instructions for upgrading JuiceboxBuilder-Pro and existing galleries can be found here.

Re: Strange Thumbnail behaviour

Hi,

it seems that it happens only with Safari (Desktop). I don't see it at Chrome. The URL is www.kunstmenschen.com (still under construction).

Re: Strange Thumbnail behaviour

Thank you for providing the link to your gallery's web page.

I have viewed your gallery in Edge, Chrome 67, Firefox 61.0.1, Internet Explorer 11 and Opera 54.0 (on a Windows 10 PC).
The rounded corners on the thumbnails seem stable in all the browsers I've noted above. (I've not yet seen the rounded corners change to rectangular corners in any of these browsers.)

The only problem I encountered was when viewing your gallery in Safari 5.1.7 (the last version of Safari for the PC).
(I do not currently have access to a Mac so cannot view your gallery in the latest version of Safari.)
In Safari 5.1.7, the thumbnails all have rectangular corners (and are stable as such) but this is probably due to Safari 5.1.7 being woefully out-of-date now (released May 2012) and having limited (or no) support for CSS 3. (Apparently, Safari 6.1 and earlier did not apply border-radius correctly to image borders, as noted here.)
My results in Safari 5.1.7 are essentially of no relevance but I include them here simply for the sake of completeness and because Safari is the only browser that you see the problem in (albeit most likely a different version).
Out of interest, what version of Safari are you using?

There are really only a couple of things that spring to mind that I would try myself.

(1) Try resetting your Safari browser (clearing the cache and temporarily disabling all extensions) to see if this helps.

(2) Try validating your web page with the W3C Markup Validator and fix any errors reported.
I notice that your web page has several errors (many are trivial, others not so) and fixing the errors so that code on your web page validates correctly should help your web page to be displayed with greater consistency and predictability across different browsers.
For example, I notice that your web page has some HTML code (loading 6 external JavaScript files) after the closing </html> tag. (This code should be inside either the <head> ... </head> section or the <body> ... </body> section of your web page.)

I hope my notes above help somewhat, even though I'm not currently able to see (or replicate) the problem myself (which makes troubleshooting that much more difficult).

Re: Strange Thumbnail behaviour

Hi,

thanks for spending time exploring the problem. The problem occurs with Safari 11.1.1

Your're right, there have been some HTML error (the most critical should be fixed meanwhile) since I am still building on the page. But the problem remained.

I made a little screen recording but unfortunately the forum won't let me upload it. I there any other adress I could send it to?

Re: Strange Thumbnail behaviour

You could just upload the video you your web server and post a link if you like.

In order to troubleshoot further, try displaying your gallery on a page of its own (just use the 'index.html' file generated by JuiceboxBuilder-Pro) rather than viewing it embedded in your web page (alongside all your other content).
Does the problem still happen (in your Safari browser) when you view the gallery in isolation?

Also, here's a full page demo gallery and an embedded demo gallery (on our own web server) both featuring thumbnails with rounded corners.
Do you see the problem (in your Safari browser) in these galleries (or just your own)?

If the problem does not happen when you view the gallery on its own or in our own demo galleries, then the problem may be some kind of CSS and/or JavaScript conflict originating from the custom code on your embedding page.
If this is the case, then duplicate your web page (to use for testing purposes) and then remove different parts of your custom code bit-by-bit (checking the gallery's behavior afterwards) until the thumbnail corners become stable and you find the root of the problem.

I hope this points you in the right direction.

Re: Strange Thumbnail behaviour

here we go: http://kunstmenschen.com/debug/screenshot.mov

Even when I only use the generated index.html I got the bug. So it can't be a problem with my own CSS or HTML code. In the examples you sent I don't have the problem, even with Safari.

Currently I am wondering if it has something to do with the border around the active thumbnail, because this is the only real difference I see between the sample and what my Lightroom generated.

Re: Strange Thumbnail behaviour

Thanks for the video and additional information.

Unfortunately, as the problem happens only in a browser that I do not have access to (and, therefore, I cannot replicate the problem myself), I'm going to need your help to troubleshoot further.

Here's a test gallery using exactly the same configuration options that your gallery uses except for the value of emailAddress . (I've removed your email address from the test gallery.)
The test gallery even uses a baseUrl as your gallery does (with the same folder name) and also has the same dimensions and background color.
Also, both galleries (yours and mine) use the same version of Juicebox-Pro (v1.5.1).

The only two differences between your own gallery and mine should be:
(1) the images in the galleries
(2) the web server that the galleries are hosted on

Test Gallery: [Link removed.]

Please take a look at this test gallery in Safari 11.1.1 to see if you still see the problem.
This might help to narrow down the root of the problem and eliminate certain factors.

Also, are you able to update to the latest version of Safari (11.1.2) just in case the problem is somehow unique to Safari 11.1.1?

If this turns out to be a browser-specific bug in Juicebox-Pro (which it looks like it might be), I may not be able to solve your problem immediately but, once I've gathered as much information as possible, I can at least contact the developers who will investigate further.
Thank you.

Re: Strange Thumbnail behaviour

I did not have the problem with the gallery you created. However, I changes some value (mainly the thumbnail border) in lightroom and uploaded it again and the the problem had disappeared.

So.. thanks!! Problem solved.

Re: Strange Thumbnail behaviour

It's certainly very strange that the problem manifested itself in only your gallery when viewed in Safari 11.1.1, especially when an identical test gallery (except for the gallery image and hosting web server) did not demonstrate the problem in the same browser.

However, I'm glad that everything seems to be OK at the moment with your new configuration options.
If you encounter the problem again, please let me know (just post back here) and I will ask the developers to investigate further. Thank you.