Javascript on mac Safari causing problems – JavaScript – SitePoint Forums

Javascript on mac Safari causing problems – JavaScript – SitePoint Forums


Hi, I have this Javascript snippet on a gallery site

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

This gives “There was a problem repeatedly with https://rivka-aderet.org”
in the Mac Safari browser.
Any suggestions on how to make it work in the Safari browser would be greatly appreciated


This code, as it stands, is good. No problem even on Mac. Do we need more information about where the slides are coming from, or can you tell us what we need to click on your website to get this error, so we can try it ourselves?



1 I like it

Thanks Thallius,
I’m not sure where the problem is; when i comment the code above, it works fine.
Here is the section:

<script>
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[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
//  captionText.innerHTML = dots[slideIndex-1].alt;
}
$(document).ready(function() {
  $('.example').magnify();
  $("#sidebar-toggle").on("click", function () {
    $("#wrapper").toggleClass("no-sidebar");
});
});
</script>

I am using Safari v13.1.2 on macOS High Sierra v 10.13.6. I can’t watch Safari on my iPhone either

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

The Console tab shows:
Could not load resource: Incorrect URL safari-resource: /page-load-errors-extra.css

My Safari won’t even load this page.

I suggest you validate the html first, as you have duplicate mainImg identifiers and each one must be unique.

  1. Error : Duplicate ID mainImg .From line 123, column 477; on 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 is rectified.

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 embedded a body style within 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 Analysis error body {minimum height: 100vh; screen: flex; flex-direction: column; } / * padding-top: 3%; * /

Like I said, maybe it has nothing to do with it, but it has to be fixed first.: slight_smile:



1 I like it

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, a favicon icon could not be loaded.

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

I get the screen shown in my first screenshot and then I get a reload message.

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

I still see the CSS bugs I mentioned when I look at CSS in Chrome on Mac (which works fine). I’ve seen many times where an incorrect parenthesis can completely destroy Safari, so I suggest validating 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 real version, works without any problems.

Thanks for that Dennis, it looks like PaulOB is also opening up well in Monterey, but not in the High Sierra, which is what I’m trying to do.
How do I stop the favicon icon from trying to load?

Thanks

When I switch the user agent to Safari 13 iPad, I get Allow-Origin errors. Maybe that helps?

[Error] Source https://rivka-aderet.org is not allowed by Access-Control-Allow-Origin. Status code: 403
[Error] Source-to-source resource sharing policy denied the source-to-source script upload.
[Error] The resource could not be loaded: Access-Control-Allow-Origin does not allow the source https://rivka-aderet.org. Status Code: 403 (eb098350bc.js, line 0)



1 I like it

omnomnomnom CORS nom nom nom.

The browser will always try to load the favicon according to your header (link tag, rel = icon) and try the default /favicon.ico again, and then launch a generic page icon if it doesn’t find either.



2 I like it

Okay, I copied all the files locally for testing and now I can debug and the problem is as you indicated in your first post, because once js is running, the page breaks badly according to the captures of screen I showed.

If you turn off the magnification routine, your snippet snippet works, and if you turn off the js slider, the magnification works.

The problem seems to be that you are configuring the items to display: none and this seems to stop the expansion routine running on our safari and operating system version.

As proof, I hid the items off the screen 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 this:

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

Then I added CSS to hide it off the screen.

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

Here is a screenshot of Safari with this code in place to show that it works.

Now that I’ve explained where the problem lies, I’m sure one of the JS gurus could come up with a js solution : slight_smile: However, I would rather hide with css and let js only add classes.

This suggests that you are accessing the hidden item after the class has been changed to hide it.
Js can only access visible items.
But this should generate an error message.
I use the following function to catch bugs.

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 it … In this case I could never make an invisible element visible with JS …

In my Safari and Mac OS version, you receive the message shown in my screenshot in the post # 8. You have no chance of seeing any error messages, as the browser is loading the problem page before you can see anything. There are no errors in the console other than those shown.

Adding the window.onerror feature has no effect on Safari either.

I can confirm that it is the display: none that is causing the problem, as it breaks magnify.js in my Safari, although I set the items to display: none with css. I guess machiny.js is modifying the dome and older Safari can’t handle it when the item is display: none.

Hiding items off the screen as in my previous code would seem to be the easiest solution and it works without any problems. : slight_smile:

Otherwise, I think you’ll probably need to destroy and restart the expansion connector every time the slider routine hides an item. Probably the way this demo works for bxslider that works well on my Safari.

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



Source link

Related post

EDUCAUSE 2022: How Data Collection Can Improve Student and Faculty IT Support

EDUCAUSE 2022: How Data Collection Can Improve Student and…

At Indiana University, Gladdin said, to make life easier for students and faculty, they implemented a course template for the Canvas…
UGC, AICTE warn students against online PhD programmes offered by EdTech platforms | Latest News India

UGC, AICTE warn students against online PhD programmes offered…

The University Grants Commission (UGC) and the All India Council for Technical Education (AICTE) on Friday issued a joint advisory against…
UGC, AICTE warn students against online PhD programmes offered by EdTech platforms | Latest News India

UGC, AICTE warn students against online PhD programmes offered…

The University Grants Commission (UGC) and the All India Council for Technical Education (AICTE) on Friday issued a joint advisory against…

Leave a Reply

Your email address will not be published.