Does anybody have the same issue of photos displaying behind overlay? Any workaround or resources would be so much appreciated!!
Hi Stephane, sorry to say I do not have a galaxy tab to see it live. But even then, these things are hard to debug just because they are happening on a device where there are no developer tools available.
Could you try adding the following to your themes stylesheet:
#fancybox-wrap {
z-index: 11200 !important;
}
#fancybox-overlay {
z-index: 11100 !important;
}
Just to see if that pins the z-index to the original values.
Thanks for the response RavanH.
I’ve tried what you suggested but the problem persists. It seem to affect different models of Galaxy and Prestigio tablets… please let me know if you have a chance to test it on physical devices, as I personally used BrowserStack service (which is usually reliable).
This URL can be tested, as it shows this “overlay/z-index” problem when the in-page photos are clicked: http://www.fathompaddleguiding.ca/blog/5-day-georgian-bay-sup-trip-report/
Thanks.
I see the issue on Browserstack when selecting a Galaxy Tab device. I notice that the moment the page (with an image opened in the lightbox) is scrolled then the image ‘pops’ to above the overlay layer… Very strange. It might mean this is not a z-index issue.
I don’t have such a device to test live. Only an older Samsung Galaxy S mobile but I see you have deactivated FancyBox for small screens.
One thing I notice in the page source: There is a blank line in front of the <!DOCTYPE html> at the top. Could you try to remove that just to make sure it’s not a doctype issue?
I removed the blank line but it doesn’t seem to have changed anything, at least in BrowserStack. I don’t know if the service caches content or not though. When emulating the 2 galaxy tablets, on a page with an active fancybox, I can’t seem to be able to scroll down the page to observe the behaviour you were talking about.
If you think it may help to test on your Samsung device I can easily re-activate FancyBox for small screens.
Thanks
I don’t have any developer tools on the device so there is no way to determine quickly what the cause might be.
If you test a page like http://www.status301.com/easy-fancybox-sandbox/ in browserstack, you’ll notice there is no such problem visible. The only difference there is that it is the development version (download it from http://wordpress.org/plugins/easy-fancybox/developers/ under Other Versions) plus the Pro extension but I don’t think that will make a difference in this case.
This might mean that the problem comes from a conflict with either another plugin or the theme. If you can build a copy of the site (use a plugin like Duplicator) on a test location and reproduce the issue there, then you can test by deactivating all other plugins and eventually switching to the Twenty Twelve theme.
This is probably the only way to at least narrow down where the root of issue lies…
Indeed, the problem comes from a conflict with my theme… I don’t know what’s wrong yet but I’ll figure it out. I should have tried that before. I guess it’s how we learn. Thanks for pointing it out and sorry to have lost your time. Keep up the good work!! Thanks!
I guess it’s how we learn. Thanks for pointing it out and sorry to have lost your time.
Yes and no problem. 🙂
It seems like a very tricky thing to debug. Maybe the easiest will be to switch to another lightbox plugin. There are many different flavors available 🙂
