Carousel No t
-
Hi, I’m having an issue with images in the Splide Carousel Block failing to load in Safari. The carousel works correctly in Google Chrome, but in Safari every image displays as a blank box with a question-mark/broken-image icon.
I have reproduced the issue in Safari on both macOS and iOS, while the same page and carousel display correctly in Chrome.
I inspected one of the failed images in Safari Web Inspector and noticed that the image
srcis being output as a blob URL, for example:src="blob:https://[site-domain]/[UUID]"There is no normal image URL,
srcset, ordata-srcon the<img>element.In Safari’s Network panel, each of these blob image requests fails with:
Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.)
I have tested the following without resolving the issue:
- Changed carousel Type from Loop to Slide
- Disabled lazy loading
- Tested with custom image-sizing CSS removed
- Confirmed the problem occurs with every image in the carousel
- Confirmed the images themselves load normally outside the carousel
The carousel functionality itself appears to work in Safari. The slides are present and move as expected, but the images inside them fail to load.
Browser behavior:
- Chrome on macOS: works
- Safari on macOS: images fail
- Safari on iOS: images fail
Safari Web Inspector shows the
<img>element in the carousel as:<img decoding="async" src="blob:https://[site-domain]/[UUID]" alt="">Is the use of blob URLs for the carousel images expected behavior? If so, is there a known Safari/WebKit compatibility issue or workaround? I’m happy to provide additional information or screenshots from Web Inspector if helpful.
Thank you!
You must be logged in to reply to this topic.