Salut, j’ai ce morceau de Javascript dans un site de galerie th
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
Cela donne "Un problème est survenu à plusieurs reprises avec https://rivka-aderet.org"
sur le navigateur Mac Safari.
Toutes les suggestions sur la façon de le faire fonctionner dans le navigateur Safari seraient très appréciées
Ce code, tel qu'il est, est bon. Il n'y a aucun problème même sur Mac. Nous avons besoin de plus d'informations sur l'origine des diapositives ou peut-être pouvez-vous nous dire sur quoi cliquer sur votre site Web pour obtenir cette erreur, afin que nous puissions essayer nous-mêmes ?
1 J'aime
Merci Thalius,
Je ne sais pas où est le problème - quand je commente le code ci-dessus, cela fonctionne bien.
Voici la rubrique :
J'utilise Safari v13.1.2 sur macOS High Sierra v 10.13.6. Je ne peux pas non plus voir dans Safari sur mon iPhone
Alors que vous dit la console javascript ? (Ouvrez-le avec Commande-Opt-C)
L'onglet console affiche :
Échec du chargement de la ressource : mauvaise URL safari-resource:/page-load-errors-extra.css
Mon Safari ne charge même pas cette page.
Je vous suggère d'abord de valider le html car vous avez des identifiants mainImg en double et chacun doit être unique.
- Erreur : Identifiant en double
mainImg.De la ligne 123, colonne 477 ; à la ligne 123, colonne 619 `cm![]()
https://validator.w3.org/nu/?doc=https%3A%2F%2Frivka-aderet.org%2F
Cela n'a peut-être rien à voir avec le problème, mais tous les paris sont ouverts jusqu'à ce qu'il soit corrigé.
Vous avez également une erreur dans votre CSS.
par exemple
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%; */
Vous semblez avoir imbriqué un style de corps dans la règle html, body (à moins que vous ne l'ayez copié à partir d'un fichier de préprocesseur quelque part et que vous ne l'ayez pas compilé au préalable).
Pardon! Nous avons trouvé les erreurs suivantes (1)
URI : https://rivka-aderet.org/css/style.css
24 Corps d'erreur d'analyse { min-height : 100vh ; affichage : flexible ; flex-direction : colonne ; } /* padding-top : 3 % ; */
Comme je l'ai dit, cela n'a peut-être rien à voir avec cela, mais doit d'abord être corrigé.
1 J'aime
Il semble fonctionner correctement sur mon bureau Monterey 12.3.1
Je clique sur les vignettes et l'image s'affiche.
L'erreur de la console n'est rien, elle n'a pas réussi à charger une icône favicon.
Je ne peux toujours rien obtenir dans Safari 13.2.1 Mac OS High Sierra 10:13:6 (c'est la dernière version Mac que mon matériel prendra en charge).
J'obtiens l'écran affiché dans ma première capture d'écran, puis je reçois un message de rechargement.
Malheureusement, cela me rend impossible le débogage à distance sur Safari.
Je vois toujours les erreurs CSS que j'ai mentionnées lorsque je regarde le css dans Chrome sur Mac (qui fonctionne bien). J'ai vu plusieurs fois maintenant où un support incorrect peut complètement détruire Safari, c'est pourquoi je suggère de valider le CSS, mais pour être honnête, je ne pense pas que ce soit le problème cette fois.
Om Mac Monterey avec Safari 15.4, qui est la version actuelle, cela fonctionne sans aucun problème.
Merci pour ce Dennis, il semble que pour PaulOB, il s'ouvre également sur Monterey mais pas sur High Sierra - c'est ce que je teste.
Comment puis-je empêcher l'icône favicon d'essayer de se charger ?
Merci
Modification de l'agent utilisateur sur Safari 13 iPad J'obtiens des erreurs Allow-Origin. Peut-être que cela aide?
[Error] L'origine https://rivka-aderet.org n'est pas autorisée par Access-Control-Allow-Origin. Code d'état : 403
[Error] Chargement de script cross-origin refusé par la politique Cross-Origin Resource Sharing.
[Error] Échec du chargement de la ressource : l'origine https://rivka-aderet.org n'est pas autorisée par Access-Control-Allow-Origin. Code d'état : 403 (eb098350bc.js, ligne 0)
1 J'aime
omnomnomnom CORS nom nom nom.
Le navigateur essaiera toujours de charger le favicon en fonction de votre en-tête (balise de lien, rel=icon), et reviendra à essayer le /favicon.ico par défaut, puis lancera une icône de page générique s'il ne trouve ni l'un ni l'autre.
2 J'aime
Ok, j'ai copié tous les fichiers localement pour les tests et je peux déboguer maintenant et le problème est comme vous l'avez indiqué dans votre premier message en ce qu'une fois que js s'exécute, la page se casse mal selon les captures d'écran que j'ai montrées.
Si vous désactivez la routine d'agrandissement, votre extrait de curseur fonctionne et si vous désactivez votre curseur js, l'agrandissement fonctionne.
Le problème semble être que vous définissez les éléments sur display: none et cela semble empêcher la routine d'agrandissement de fonctionner dans notre version de safari et os.
À titre de test, j'ai caché les éléments hors écran à la place et tout fonctionne comme prévu dans Safari et d'autres navigateurs.
J'ai changé votre routine en ceci:
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;
}
Plus précisément, tout ce que j'ai changé, ce sont ces 2 paires:
//slides[i].style.display = "none"; // removed
slides[i].classList.add("hide-slide"); //added
et ça:
// slides[slideIndex - 1].style.display = "block"; // removed
slides[slideIndex - 1].classList.remove("hide-slide"); //added
Ensuite, j'ai ajouté le css pour le cacher hors écran.
.hide-slide {
position: absolute;
left: -200vw;
top: -100vh;
clip-path: circle(0);
pointer-events: none;
}
Voici une capture d'écran de Safari avec ce code en place pour montrer qu'il fonctionne.
Maintenant que j'ai expliqué où se situe le problème, je suis sûr qu'un des gourous de JS pourrait donner une solution js Cependant, je préférerais toujours cacher en utilisant css et laisser js ajouter simplement des classes.
Cela me suggère que vous accédez à l'élément masqué après que la classe a été modifiée pour le masquer.
Seuls les éléments visibles sont accessibles par js.
Mais cela devrait générer un message d'erreur.
J'utilise la fonction suivante pour intercepter les erreurs.
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;
};
Je ne peux pas croire… Dans ce cas, je ne pourrais jamais rendre visible un élément invisible mit JS…
Dans ma version de Safari et Mac os, vous obtenez le message affiché dans ma capture d'écran en post #8. Vous n'avez aucune chance de voir des messages d'erreur car le navigateur charge cette page de problème avant que vous ne puissiez voir quoi que ce soit. Il n'y a pas d'erreurs dans la console en dehors de celles affichées.
L'ajout de votre fonction window.onerror n'a aucun effet non plus dans Safari.
Je peux confirmer que c'est le display:none qui cause le problème car il casse magnify.js dans mon Safari même si je règle les éléments sur display:none avec css. Je suppose que le magniy.js modifie le dom et que l'ancien Safari ne peut pas le gérer lorsque l'élément est display:none.
Cacher les éléments hors écran comme dans mon code ci-dessus semble être la solution la plus simple et fonctionne sans accroc.
Sinon, je pense que vous auriez probablement besoin de détruire et de réinitialiser le plugin magnify chaque fois qu'un élément est masqué par la routine du curseur. Probablement comme cette démo le fait pour le bxslider qui fonctionne bien dans mon Safari.
Hors sujet: Notez que comme déjà mentionné, le CSS est cassé et invalide avec le html, les règles du corps sont mélangées et doivent être corrigées. Aussi dans le html, vous avez utilisé id="mainImg" 29 fois qui est également invalide car un identifiant doit être unique et n'est utilisé qu'une seule fois sur la page. Exécutez le code via les validateurs CSS et html du W3c pour détecter facilement les fautes de frappe et les erreurs. 
Merci beaucoup pour toute l'aide que vous avez pris le temps de régler ce problème et d'expliquer comment le résoudre.
Il s'agit d'un site de galerie pour les peintures de ma femme, et quand j'ai rencontré ce problème, je ne voyais pas de solution et il était urgent pour moi de publier ce site, alors j'ai créé un nouveau site - rivka-aderet.art (sans la barre de défilement qui s'effondre), que j'espère terminer dans quelques semaines, puis je reviendrai pour terminer ce site maintenant que vous m'avez montré le chemin.
Merci encore pour toute votre aide, très appréciée
1 J'aime
Salut Paul, Pour une raison ou une autre, le CSS ci-dessus n'a pas fonctionné pour moi. Alors je l'ai changé en
.hide-slide {visibility: hidden}
et cela semble fonctionner à la fois dans Chrome et Safari.
Merci encore d'avoir pris le temps d'isoler le problème.
1 J'aime