I made website where are only pictures in it and I'm displaying those images in my "main" website. In chrome, it works fine but in safari the aren't showing up at all. Even createElement for div isn't working. The problem is this link. Here's my code:
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>So removing some stuff worked for me. Basically Safari doesn't support navigator.userAgentData so it wasn't displaying images for that reason. So i had to remove it:
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);
}