Creé un sitio web donde solo hay imágenes y estoy mostrando esas imágenes en mi sitio web "principal". En Chrome, funciona bien, pero en Safari no aparecen en absoluto. Incluso createElement para div no funciona. El problema es este enlace. Aquí está mi código:
for (let i = 0; i < 11; i++) { Draw_Images(i); } function Draw_Images(i) { var div = document.createElement('div'); div.id = "meme" + i; div.style.borderRadius = "1%"; div.style.width = "200px"; div.style.height = "200px"; div.style.border = "1px solid"; div.style.padding = "0"; div.style.margin = "0"; var divParent = document.getElementById("memes_container").appendChild(div); var img = new Image(); img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg"; img.id = "image_meme" + i; img.style.width = "100%"; img.style.height = "100%"; img.style.objectFit = "contain"; img.className = "img-fluid"; img.alt = i; img.crossOrigin = 'anonymous'; divParent.appendChild(img); } <div class="container"> <div class="row"> <div class="col-sm"> <div id="memes_container"></div> </div> </div> </div>Así que eliminar algunas cosas funcionó para mí. Básicamente, Safari no es compatible con navigator.userAgentData , por lo que no mostraba imágenes por ese motivo. Así que tuve que eliminarlo:
for (let i = 0; i < 11; i++) { Draw_Images(i); } function Draw_Images(i) { const isMobile = navigator.userAgentData.mobile; //REMOVED THIS AND IT WORKED!! var div = document.createElement('div'); div.id = "meme" + i; div.style.borderRadius = "1%"; div.style.width = "200px"; div.style.height = "200px"; div.style.border = "1px solid"; div.style.padding = "0"; div.style.margin = "0"; var divParent = document.getElementById("memes_container").appendChild(div); var img = new Image(); img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg"; img.id = "image_meme" + i; img.style.width = "100%"; img.style.height = "100%"; img.style.objectFit = "contain"; img.className = "img-fluid"; img.alt = i; img.crossOrigin = 'anonymous'; divParent.appendChild(img); }