Describe the bug
We use the same full-resolution JPEG URL for images displayed at a small size in a gallery grid and for their Fancybox links. The grid images are lazy-loaded and have already been loaded by Safari before they are opened in Fancybox.
In Safari 27.0 on both iPhone and macOS, the image inside the open Fancybox slide sometimes appears much too small instead of fitting the available viewport. This happens intermittently, particularly when navigating to the next or previous image. The grid image itself looks normal, and the source JPEG has the correct dimensions.
Our dimension check has also observed that an affected image’s reported naturalWidth and naturalHeight can differ from the known dimensions of the source file. We have seen the issue with different gallery lazy-loading implementations. We have not observed it in Chrome.
As a workaround for Safari 27.0, we leave the grid image URL and link href unchanged, but give Fancybox a distinct data-src URL for the same JPEG, such as image.jpg?fancybox-view=1. In our tests, this prevents the undersized display, including when navigating through the gallery.
The screenshot is from before we implemented this workaround.
We suspect an interaction with Safari’s handling of an image URL that was previously loaded and displayed at a smaller size. We have not established whether the underlying issue is in Safari or Fancybox. Is there a recommended solution that avoids requesting the same image under a second URL?
Reproduction
In our gallery, full-resolution JPEGs are displayed at a small size in a grid. The grid images are loaded lazily, so the same image URLs have already been loaded into Safari's image cache before a visitor opens them in Fancybox.
Steps to reproduce:
- Open a gallery in Safari 27.0 on iPhone or macOS.
- Scroll through the grid so several images load.
- Open an image in Fancybox and navigate through the gallery using the next/previous controls.
- Repeat with several images; the issue is intermittent.
Actual result: An image inside the open Fancybox slide sometimes appears much too small, roughly like a grid preview, instead of being fitted to the available viewport. The grid image itself looks normal, and the JPEG file has the correct full-resolution dimensions. We have also observed incorrect naturalWidth/naturalHeight values on affected Fancybox images.
Expected result: Fancybox displays the opened image at the appropriate size within the viewport.
We have seen this with different gallery lazy-loading implementations, on Safari 27.0 for both iPhone and macOS. We have not observed it in Chrome.
Workaround: Giving Fancybox a distinct data-src URL for the same JPEG, such as image.jpg?fancybox-view=1, while leaving the grid image URL and link href unchanged, has prevented the issue in our tests. This suggests an interaction with an image URL that Safari has already loaded for the grid, but we cannot yet determine whether the underlying cause is in Safari or Fancybox.
Additional context
No response
Describe the bug
We use the same full-resolution JPEG URL for images displayed at a small size in a gallery grid and for their Fancybox links. The grid images are lazy-loaded and have already been loaded by Safari before they are opened in Fancybox.
In Safari 27.0 on both iPhone and macOS, the image inside the open Fancybox slide sometimes appears much too small instead of fitting the available viewport. This happens intermittently, particularly when navigating to the next or previous image. The grid image itself looks normal, and the source JPEG has the correct dimensions.
Our dimension check has also observed that an affected image’s reported
naturalWidthandnaturalHeightcan differ from the known dimensions of the source file. We have seen the issue with different gallery lazy-loading implementations. We have not observed it in Chrome.As a workaround for Safari 27.0, we leave the grid image URL and link
hrefunchanged, but give Fancybox a distinctdata-srcURL for the same JPEG, such asimage.jpg?fancybox-view=1. In our tests, this prevents the undersized display, including when navigating through the gallery.The screenshot is from before we implemented this workaround.
We suspect an interaction with Safari’s handling of an image URL that was previously loaded and displayed at a smaller size. We have not established whether the underlying issue is in Safari or Fancybox. Is there a recommended solution that avoids requesting the same image under a second URL?
Reproduction
In our gallery, full-resolution JPEGs are displayed at a small size in a grid. The grid images are loaded lazily, so the same image URLs have already been loaded into Safari's image cache before a visitor opens them in Fancybox.
Steps to reproduce:
Actual result: An image inside the open Fancybox slide sometimes appears much too small, roughly like a grid preview, instead of being fitted to the available viewport. The grid image itself looks normal, and the JPEG file has the correct full-resolution dimensions. We have also observed incorrect naturalWidth/naturalHeight values on affected Fancybox images.
Expected result: Fancybox displays the opened image at the appropriate size within the viewport.
We have seen this with different gallery lazy-loading implementations, on Safari 27.0 for both iPhone and macOS. We have not observed it in Chrome.
Workaround: Giving Fancybox a distinct data-src URL for the same JPEG, such as image.jpg?fancybox-view=1, while leaving the grid image URL and link href unchanged, has prevented the issue in our tests. This suggests an interaction with an image URL that Safari has already loaded for the grid, but we cannot yet determine whether the underlying cause is in Safari or Fancybox.
Additional context
No response