react-mapbox-gl
react-mapbox-gl copied to clipboard
ultra-weird bug : some images don't show up on mobile devices (works fine on desktop computer)
Hello,
I'm adding raster images to my map (like in this example); that works fine on my desktop computer.
But I noticed that the images won't show up on mobile devices (tested on an Android smartphone and on my Ipad with Firefox). I've spent hours trying to find out what was causing this.
I finally found out (by accident) that my code was OK, and that it seems that this has maybe something to do with the file itself or the server:
-
this image shows up on my desktop computer and on my Ipad:
https://www.tribunaldesprejuges.org/wordpress/wp-content/uploads/2020/04/AND1_OPA75-300x212.png -
this image shows up on my desktop computer but does not on my Ipad:
https://tdpdatas.cargoculte.be/wordpress/wp-content/uploads/2020/04/AND1_OPA75-300x212.png
This is the same image file (I compared them with a diff checker).
I was thinking that there might be a cross-origin problem; but the map is hosted on the same server than the image that doesn't show up. Besides, it works fine on my desktop computer.
What could cause this ? I would really appreciate a feedback since I'm stuck as hell... Thanks!
Hi @gordielachance
Making a fetch request on:
https://www.tribunaldesprejuges.org/wordpress/wp-content/uploads/2020/04/AND1_OPA75-300x212.png
works fine but making the same request on:
https://tdpdatas.cargoculte.be/wordpress/wp-content/uploads/2020/04/AND1_OPA75-300x212.png
I get a CORS error.
I have no idea what your wordpress / server configuration looks like.
It might be an issue in your .htaccess or inside your virtual host conf file.
Hope this helps, good luck !
Hello, yes, that helps me understand. If I knew this, I would not have spent so many time trying to find out what was going on :)
Two questions :
- why is this working on my local computer (local server) ?
- why does not mapbox logs an error about that ?
Thanks