On the object detail view, when there are more than two images, trying to display images in any non-sequential order will trigger a display bug. For example, after page load, the first image is displayed, then, clicking on the third image will display it, but then, clicking on the second image won’t do anything.
My analysis:
Jcarousel displays images concatenated as inline elements and horizonrally scrolls around to display the selected image. However, in some situations, an image has a zero-height and does not take any space, resulting in misalignment of horizontal scroll position (and JS code somewhat failing). CSS min-height ensures images will always take their allocated width.
This bug is currently visible on this page, and you can also use devtools to manually add min-height:1px to the <li> jcarousel element to fix the bug.
collectiveaccess
commented
1 year ago
On the object detail view, when there are more than two images, trying to display images in any non-sequential order will trigger a display bug. For example, after page load, the first image is displayed, then, clicking on the third image will display it, but then, clicking on the second image won’t do anything.
My analysis: Jcarousel displays images concatenated as inline elements and horizonrally scrolls around to display the selected image. However, in some situations, an image has a zero-height and does not take any space, resulting in misalignment of horizontal scroll position (and JS code somewhat failing). CSS
min-heightensures images will always take their allocated width.This bug is currently visible on this page, and you can also use devtools to manually add
min-height:1pxto the<li>jcarousel element to fix the bug.