There are multiple problems with the way the element that displays captions and license info at the bottom left of images works.
The element with a class of "media-info" (the container) has two CSS rules. One sets its background colour to white and the other sets its opacity to 0.7. I'm not sure what an opacity of 0.7 is supposed to do--it certainly doesn't aid legibility--but it's creates a weird two-tone effect in some circumstances when multiple "media-image" elements overlap.
- This is fine if the user hasn't added a caption to the image and only uploaded a single image, it's just slightly hard to read with the reduced opacity allowing the image to bleed through.
- If the user has added a caption then it seems to be fine on the first image, as there is only one "media-info" element, it's just a bit difficult to read as the caption and the license icon run into each other. This can be easily fixed by adding a bit of right margin (1em works nicely) to give the caption a bit of breathing room.
- If the user has uploaded more than one image and added captions to them then the problems really start. When you click the arrow to move to the next image a new "media-info" element seems to be dynamically created. Because it is absolutely positioned and has its z-index set to auto it sits over the top of the first "media-info" element making it quite hard to read. If the caption of the second image is a different length to the caption of the first you get a weird effect
- where the two elements overlap their opacities of 0.7 combine to make an opacity of 1 (1.4 really but opacity is capped at 1) and you get a solid white background colour. You also get text and icon bleed through from the lower element in the stack which greatly hinders text legibility and since the license icons are now out of alignment they look a proper mess.
- where they do not overlap the longer one, with its opacity of 0.7 suffers image bleed through that creates a weird two-tone effect for the two combined elements..
Another problem is that the JavaScript used to remove the license info doesn't work properly. When you click the cross to remove the license info in an attempt to read the caption the whole thing disappears. This is because the JavaScript is targeting the wrong element. The JavaScript code is set to hide the "media-info" element but this is the parent element of not just the license icon but also the caption. The code should be targeting the element with a class of "license" and itself--the element with a class of "media-info-close"--although that should probably be a class of "license-close", or you could maybe wrap both elements in a div and just hide that. Unless your intention is to remove the entire element in which case you should maybe enclose the cross in its own box (perhaps with a red background) to give it some visual hierarchy and make it obvious that it's a separate element from the license icon.
Also because the "media-info" element from the previous image is not being removed from the DOM or hidden when you click onto the next image if you do remove the caption and license icon pair from an image in a set of images you are left with the caption from the previous image... which probably doesn't make any sense for the current image.
I've never used Fancybox but these issues, on the face of it, don't seem hugely complicated. They may be something you've inadvertently caused when you set it up or customised it. If so then hopefully they are an easy fix.
This has been an ongoing issue for some time and it must be frustrating for verifiers if a user has added a caption to an image, to aid verification, and they can't read it.
Cheers, Mesh
P.S. I'm using the latest version of Firefox to access the site.