Hi I have this piece of Javascript in a gallery site th
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
That gives “A problem repeatedly occured with https://rivka-aderet.org”
on Mac Safari browser.
Any suggestions how to get this to run in Safari browser would be much appreciated
This code, as it is, is good. There is no problem even on Mac. We need more information about where is slides coming from or maybe you can tell us what to click on you website to get this error, so we can try ourselves?
Thanks Thallius,
Not sure where the problem is - when I comment out above code it works ok.
Here’s 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’m using Safari v13.1.2 on macOS High Sierra v 10.13.6. Also can’t view in Safari on my IPhone
So what is the javascript console telling you? (Open it with Command-Opt-C)
The Console tab shows:
Failed to load resource: bad URL safari-resource:/page-load-errors-extra.css
My Safari won’t even load that page.
I suggest you first validate the html as you have duplicate mainImg ids and each must be unique.
- Error : Duplicate ID
mainImg.From line 123, column 477; to 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.
e.g.
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 that 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: flex; flex-direction: column; } /* padding-top: 3%; */
As I said it may have nothing to do with it but needs to be fixed first.
It seems to be working ok on my desktop Monterey 12.3.1
I click 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 (that’s the latest Mac version my hardware will support).
I get the screen shown in my first screenshot and then I get a reloading message.
Unfortunately that makes it impossible for me to debug on Safari remotely.
I still see the CSS errors I mentioned when I look at the css in Chrome on Mac (which works ok). I have seen quite a few times now where one incorrect bracket can destroy Safari completely which is why I suggest validating the CSS but to be honest I don’t think that’s the issue this time.
Om Mac Monterey with Safari 15.4, which is the actual version, it works without any problems.
Thanks for this Dennis, seems for PaulOB it also opens ok on Monterey but not on High Sierra - which is what I’m testing on.
How do I stop the favicon icon trying to load?
Thanks
Changing the user agent to Safari 13 iPad I get Allow-Origin errors. Maybe this helps?
[Error] Origin https://rivka-aderet.org is not allowed by Access-Control-Allow-Origin. Status code: 403
[Error] Cross-origin script load 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)
omnomnomnom CORS nom nom nom.
Browser will always try to load favicon according to your header (link tag, rel=icon), and will fall back to trying the Default /favicon.ico, and then throw a generic page icon if it finds neither.
Ok, I’ve copied all the files locally for testing and can debug now and the problem is as you stated in your first post in that once that js runs the page breaks badly as per the screenshots I’ve shown.
If you disable the magnify routine then your slider snippet works and if you disable your slider js the magnify works.
The problem seems to be that you are setting the elements to display:none and this seems to stop the magnify routine working in our version of safari and os.
As a test I hid the elements off screen instead and it all 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 was 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 the css to hide it offscreen.
.hide-slide {
position: absolute;
left: -200vw;
top: -100vh;
clip-path: circle(0);
pointer-events: none;
}
Here is a screenshot from Safari with that code in place to show it working.
Now that I’ve explained where the problem lies I’m sure one of the JS gurus could give a js solution However I would still prefer to hide using css and let js just add classes.
This suggests to me that you are accessing the hidden element after the class has been changed to hide it.
Only elements that are visible can be accessed by js.
But that should generate an error message.
I use the following function to trap 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 that 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 get no chance to see any error messages as the browser loads that problem page before you can see anything. There are no errors in the console apart from those shown.
Adding your window.onerror function has no effect either in Safari.
I can confirm that it is the display:none that is causing the problem as it breaks magnify.js in my Safari even if I set the elements to display:none with css. I’m guessing that the magniy.js is modifying the dom and older Safari can’t handle it when the element is display:none.
Hiding the elements offscreen as in my code above would seem to be the easiest solution and works without a hitch.
Otherwise I think you’d probably need to destroy and re-initialize the magnify plugin each time an element is hidden by the slider routine. Probably like this demo does for the bxslider which works fine in my Safari.
OFF-Topic: Note as already mentioned the CSS is broken and invalid with the html,body rules all mixed up and needs to be fixed. Also in the html you have used id=“mainImg” 29 times which is also invalid as an id must be unique and is used only once on the page. Run the code through the W3c CSS and html validators to easily pick up typos and errors. 
Thanks very much for all your help taking the time to sort this out and explaining how to fix it.
This is a gallery site for my wife’s paintings, and when I hit this problem, I couldn’t see a solution and it was urgent for me to publish this site, so I set up a new site - rivka-aderet.art (without the collapsing scroll bar) , which hopefully I’ll complete in a couple of weeks and then I’ll come back to finish this site now that you’ve shown me the way.
Thanks again for all your help, much appreciated
Hi Paul, For one reason or another the above css didn’t work for me. So I changed it to
.hide-slide {visibility: hidden}
and that seems to work both in Chrome and Safari.
Thanks again for taking the time to isolate the problem.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.