Javascript on mac Safari causing issues – JavaScript – SitePoint Forums

Hi, I have this piece of Javascript in a gallery site th

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

This gives “A problem has occurred several times with https://rivka-aderet.org”
on the Mac Safari browser.
Any suggestions to get this working in Safari browser would be much appreciated


This code as it stands is good. There is no problem even on Mac. We need more information on where the slides came from or maybe you can tell us what to click on your website to get this error, so we can try it ourselves?



1 like

Thank you Thalius,
I don’t know where the problem is – when I comment out the above code it works fine.
Here is the section:


I am using Safari v13.1.2 on macOS High Sierra v 10.13.6. I also can’t see in Safari on my IPhone

So what does the javascript console tell you? (Open it with Command-Opt-C)

The Console tab displays:
Failed to load resource: wrong URL safari-resource:/page-load-errors-extra.css

My Safari doesn’t even load this page.

I suggest you validate the html first because you have duplicate mainImg ids and each must be unique.

  1. Mistake : Duplicate identifier mainImg .From line 123, column 477; at line 123, column 619 `cm

https://validator.w3.org/nu/?doc=https%3A%2F%2Frivka-aderet.org%2F

It may have nothing to do with the problem, but all bets are off until it’s fixed.

You also have an error in your CSS.

for example

html,
body {
  /*
  font-family: Arial;
  padding-top: 3%;
  margin: 0;
  */
background: #dbd5cd;
height: 100%;
margin: 0;
padding: 0;
padding-top: 3vh;
overflow: hidden;
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/*    padding-top: 3%; */

You seem to have nested a body style inside the html,body rule (unless you copied it from a preprocessor file somewhere and didn’t compile it first).

Sorry! We found the following errors (1)

URI: https://rivka-aderet.org/css/style.css

24 Parse error body { min-height: 100vh; display: flexible; flex-direction: column; } /* padding-top: 3%; */

Like I said, it may have nothing to do with it, but needs to be fixed first.



1 like

It seems to work fine on my Monterey 12.3.1 desktop
I click on the thumbnails and the image is displayed.
The console error is nothing, it failed to load a favicon icon.

I still can’t get anything in Safari 13.2.1 Mac OS High Sierra 10:13:6 (this is the latest Mac version my hardware will support).

I get the screen shown in my first screenshot, then I get a reloading message.

Unfortunately, this makes it impossible for me to debug remotely on Safari.

I still see the CSS errors I mentioned when looking at the css in Chrome on Mac (which works fine). I’ve seen many times now that a bad hook can completely destroy Safari, so I suggest validating the CSS, but to be honest, I don’t think that’s the problem this time.

Om Mac Monterey with Safari 15.4 which is the current version, it works without any issues.

Thanks for that Dennis, it looks like for PaulOB it also opens on Monterey but not on High Sierra – that’s what I’m testing.
How can I prevent the favicon icon from trying to load?

Thanks

Changing User Agent on Safari 13 iPad I’m getting Allow-Origin errors. Maybe that helps?

[Error] Origin https://rivka-aderet.org is not allowed by Access-Control-Allow-Origin. Status code: 403
[Error] Cross-origin script loading denied by Cross-Origin Resource Sharing policy.
[Error] Failed to load resource: Origin https://rivka-aderet.org is not allowed by Access-Control-Allow-Origin. Status code: 403 (eb098350bc.js, line 0)



1 like

omnomnomnom CORS name name name.

The browser will still try to load the favicon based on your header (link tag, rel=icon), and revert to trying the default /favicon.ico, then throwing a generic page icon if it doesn’t find either one or the other.



2 likes

Ok I copied all the files locally for testing and I can debug now and the problem is as you stated in your first post in that once js runs the page breaks badly according to the screenshots I showed.

If you disable the maximize routine your slider snippet works and if you disable your js slider the maximize works.

The problem seems to be that you set the items to display:none and that seems to prevent the maximize routine from working in our version of safari and os.

As a test, I hid the off-screen elements instead and everything works as expected in Safari and other browsers.

I changed your routine to this:

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function currentSlide(n) {
  showSlides((slideIndex = n));
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("main");
  let dots = document.getElementsByClassName("mainImg");
  //  let captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    //slides[i].style.display = "none"; 
    slides[i].classList.add("hide-slide");//added 
  }
  //  for (i = 0; i < dots.length; i++) {
  //    dots[i].className = dots[i].className.replace(" active", "");
  //  }
  //slides[i].style.display = "none";
  slides[slideIndex - 1].classList.remove("hide-slide");//added
  dots[slideIndex - 1].className += " active";
  //  captionText.innerHTML = dots[slideIndex-1].alt;
}

Specifically, all I changed were these 2 pairs:

    //slides[i].style.display = "none"; // removed
    slides[i].classList.add("hide-slide"); //added

and that:

// slides[slideIndex - 1].style.display = "block"; // removed
  slides[slideIndex - 1].classList.remove("hide-slide"); //added

Then I added the css to hide it offscreen.

.hide-slide {
  position: absolute;
  left: -200vw;
  top: -100vh;
  clip-path: circle(0);
  pointer-events: none;
}

Here’s a screenshot of Safari with this code in place to show it’s working.

Now that I’ve explained where the problem is, I’m sure one of the js gurus could give a js solution :slight_smile: However, I would still prefer to hide using css and let js just add classes.

This suggests to me that you access the hidden element after the class has been changed to hide it.
Only visible elements are accessible by js.
But this should generate an error message.
I use the following function to catch errors.

window.onerror = function (msg, url, lineNo, columnNo, error) {
    "use strict";
    var string = msg.toLowerCase(),
        substring = "script error",
        message = [
            'Message: ' + msg,
            'URL: ' + url,
            'Line: ' + lineNo,
            'Column: ' + columnNo,
            'Error object: ' + JSON.stringify(error)
        ].join(' - ');

    if (string.indexOf(substring) > -1) {
        alert('Script Error: See Browser Console for Detail'); // eslint-disable-line
    } else {
        alert(message); // eslint-disable-line no-alert
    }
    return false;
};

I can’t believe… In this case, I could never make an invisible element visible mit JS…

In my version of Safari and Mac os you get the message shown in my screenshot in post #8. You have no chance of seeing any error messages because the browser loads that problem page before you can see anything. There are no errors in the console other than those displayed.

Adding your window.onerror function has no effect in Safari either.

I can confirm that it is the display:none that is causing the problem as it breaks magnify.js in my Safari even though I set the elements to display:none with css. I guess the magniy.js modifies the dom and the old Safari can’t handle it when the element is display:none.

Hiding off-screen elements like in my code above seems like the easiest solution and works without a hitch. :slight_smile:

Otherwise, I think you’d probably need to destroy and reset the magnify plugin every time an element is hidden by the cursor routine. Probably like this demo does for the bxslider which works fine in my Safari.

Off topic: Note that as already mentioned, the CSS is broken and invalid with the html, the body rules are mixed up and need to be fixed. Also in the html you used id=”mainImg” 29 times which is also invalid because an identifier must be unique and is only used once on the page. Run code through W3c’s CSS and html validators to easily detect typos and errors. :wink:

Thank you so much for all the help you took the time to sort this out and explain how to fix it.
This is a gallery site for my wife’s paintings, and when I encountered this problem, I couldn’t see a solution and it was urgent for me to publish this site, so I created a new site – rivka-aderet.art (without the collapsing scrollbar), which I hope to complete in a few weeks, then I’ll be back to complete this site now that you’ve shown me the way.
Thanks again for all your help, much appreciated



1 like

Hi Paul, For some reason the CSS above didn’t work for me. So I changed it to

.hide-slide {visibility: hidden}

and it seems to work in both Chrome and Safari.

Thanks again for taking the time to isolate the problem.



1 like

James S. Joseph