Les images de mon site ne s'affichent pas sur iPhone sous iOS 14

Bonjour,

Je viens de changer de téléphone (Android avant) et je suis passer à un iPhone.

Les images de mon site ne s'affichent pas sur mon iPhone sous iOS 14, j'ai essayé avec Safari et DuckDuckGo.

Je n'ai pas ce type de problème sur PC et je ne l'avais pas non plus sur Android.

Voici l'URL : https://breat.fr

Quelqu'un aurait une idée du pourquoi du comment ? Un problème sur mon site et si oui lequel ?

Merci d'avance

Breat a écrit :

Je viens de changer de téléphone (Android avant) et je suis passer à un iPhone.
....
Quelqu'un aurait une idée du pourquoi du comment ?

Tu es du côté obscure de la force . Ne cherche pas, c'est le téléphone, change le .

Sinon, si tu as un mac, tu branches ton phone sur celui ci. Tu inspectes avec le Safari de ton mac. Demain, je jetterai un coup d'oeil avec une vm sur ton site.
Modifié par niuxe (17 Feb 2021 - 01:00)

Avec "Safari Technology Preview", téléchargeable sur le site d'Apple, tu peux aller dans Develop > User Agent et choisir la version d'IOS sur laquelle tu veux simuler son site (:
J'espère vous avoir appris quelque chose hahahaha

J'ai actuellement un problème avec mon mac mais je testerais ça demain !
Modifié par vzytoi (17 Feb 2021 - 01:15)

Bonjour,

Effectivement, ça ne marche pas avec safari, même sur un mac de bureau.

niuxe a écrit :
Tu es du côté obscure de la force Smiley murmure . Ne cherche pas, c'est le téléphone, change le.

C'est surtout tout le code du site qu'il faut changer !

Plus sérieusement, il y a une énorme règle css, qui, si on la désactive, laisse voir les images :

a[href^=""]::after, a[href^="https://breat.fr"]::after, a[href^="https://downloads.breat.fr"]::after, a[href^="https://mods.breat.fr"]::after, a[href^="https://girls.breat.fr"]::after, a[href^="https://go.breat.fr"]::after, a[href^="https://tumblr.breat.fr"]::after, a[href^="https://traductions.breat.fr"]::after, a[href^="https://tutoriels.breat.fr"]::after, a[href^="https://1fichier.com/?af=254681"]::after, a[href^="https://adf.ly/?id=2700622"]::after, a[href^="https://s.click.aliexpress.com/e/_9fB01v"]::after, a[href^="https://alldebrid.fr/?uid=22zpb"]::after, a[href^="https://alternativeto.net/user/breat/"]::after, a[href^="https://www.amazon.fr/gp/prime/?tag=bressit-21&linkCode=ur1&primeCampaignId=prime_assoc_ft"]::after, a[href^="https://battle.net/recruit/J8LHKGVL62?blzcmp=raf-hs&s=HS&m=web"]::after, a[href^="https://www.betaseries.com/membre/Breat"]::after, a[href^="http://brackets.io"]::after, a[href^="https://www.bungie.net/fr/Profile/254/4791006/Breat"]::after, a[href^="https://www.buymeacoffee.com/breatfr"]::after, a[href^="https://www.cdjapan.co.jp/aff/click.cgi/PytJTGW7Lok/1679/A318631/"]::after, a[href^="https://www.cdkeys.com/?mw_aref=breatfr"]::after, a[href^="https://codepen.io/Breat"]::after, a[href^="https://www.dailymotion.com/Breat44"]::after, a[href^="https://discord.gg/jD4uEbA"]::after, a[href^="https://www.dvdfab.cn/order.htm?af=SjuT9fqG156pg21k"]::after, a[href^="https://www.origin.com/fra/fr-fr/profile/Breat"]::after, a[href^="https://www.facebook.com/breatfr"]::after, a[href^="https://www.fanatical.com/referrals/?refer_a_friend=NTZlYjk4ODc5OWNjZGQwZTAwNGIzMGZk"]::after, a[href^="https://filejoker.net/index34656.html"]::after, a[href^="https://fr.finalfantasyxiv.com/lodestone/character/7028823/"]::after, a[href^="https://fr.finalfantasyxiv.com/lodestone/special/friend_recruit/"]::after, a[href^="https://www.games2gether.com/profile/Breat/about"]::after, a[href^="https://account.xbox.com/profile?gamertag=breat44"]::after, a[href^="https://github.com/breatfr"]::after, a[href^="https://www.gog.com/u/Breat"]::after, a[href^="https://gounlimited.to/reg47993.html"]::after, a[href^="https://www.guilded.gg?r=8mROeovA"]::after, a[href^="https://www.humblebundle.com/subscription?refc=t7vSjl"]::after, a[href^="https://fr.igraal.com/inscription?parrain=Breat"]::after, a[href^="https://www.instant-gaming.com/igr/breatfr/"]::after, a[href^="https://www.instagram.com/breat_fr"]::after, a[href^="https://www.istripper.com/?referalCode=Cj5UT4WkPDPPod1"]::after, a[href^="http://trcklks.com/?p=28&s=43044&pp=1&v=6"]::after, a[href^="https://www.jeuxvideo.com/profil/breat?mode=infos"]::after, a[href^="https://affiliation.lws-hosting.com/statistics/click/47/387560904"]::after, a[href^="https://kinguin.net/?r=44820"]::after, a[href^="https://ko-fi.com/breatfr"]::after, a[href^="https://www.linkedin.com/in/breat"]::after, a[href^="https://www.mailo.com"]::after, a[href^="https://mastodon.social/@breat_fr"]::after, a[href^="https://matomo.org"]::after, a[href^="https://bit.ly/2KK6XWY"]::after, a[href^="https://www.netflix.com/n/66BUFSLH-1"]::after, a[href^="https://invitation.olvid.io/#AwAAAGkAAAAAWmh0dHBzOi8vc2VydmVyLm9sdmlkLmlvAAB2xdJkQgmSXm5Ud3ei19t22piF6exsgHl5QagtySeKuAFlyaFlaFIBhpeXmCpVQ29V18-TaIBIOG4rclBjubQIuAAAAAAFQnJlYXQ"]::after, a[href^="https://www.pinterest.fr/breatfr/boards/"]::after, a[href^="https://www.play-asia.com/?tagid=564320"]::after, a[href^="https://shop.shadow.tech/invite/SIMCJRIE"]::after, a[href^="https://join-shortest.com/ref/a01b8fe91a"]::after, a[href^="https://robertsspaceindustries.com/enlist?referral=STAR-WFTZ-FSQY"]::after, a[href^="https://my.playstation.com/profile/Breat44"]::after, a[href^="https://rawg.io/@breat"]::after, a[href^="https://simkl.com/3715105/"]::after, a[href^="https://simkl.com/?invite-from=3715105"]::after, a[href^="https://steamcommunity.com/groups/breatfr"]::after, a[href^="https://steamcommunity.com/id/breat"]::after, a[href^="https://t.me/breatfr"]::after, a[href^="https://fr.tipeee.com/breat_fr"]::after, a[href^="https://trakt.tv/users/breat"]::after, a[href^="https://truesteamachievements.com/gamer/Breat44"]::after, a[href^="https://www.trueachievements.com/gamer/Breat44"]::after, a[href^="https://www.truetrophies.com/gamer/Breat44"]::after, a[href^="https://twitter.com/breat_fr"]::after, a[href^="https://ubisoftconnect.com/fr-FR/profile/Breat"]::after, a[href^="https://userstyles.org/users/285052"]::after, a[href^="https://vk.com/breatfr"]::after, a[href^="https://www.xboxlive.fr/gamertag_Breat44.html"]::after, a[href^="https://www.yelp.fr/user_details?userid=uNnvMhd1zqtg5kO5pTgkQw"]::after, a[href^="https://www.youtube.com/channel/UCUsRfUviCPSFF_skh31-16w"]::after, a[href^="https://www.paypal.me/breat"]::after, a[href^="https://validator.w3.org"]::after, a[href^="https://jigsaw.w3.org"]::after, a[href^="https://safeweb.norton.com"]::after, a[href^="https://uptobox.com/affiliate?aff_id=1070454"]::after, a[href^="https://www.virustotal.com"]::after, a img, a.no_icon::after {
    content: ""!important;
    padding-left: 0;
}

On se demande à quoi elle sert d'ailleurs. J'imagine qu'il y a une raison, mais elle est surement mauvaise.

Amicalement,

niuxe a écrit :
Tu es du côté obscure de la force . Ne cherche pas, c'est le téléphone, change le .

Sinon, si tu as un mac, tu branches ton phone sur celui ci. Tu inspectes avec le Safari de ton mac. Demain, je jetterai un coup d'oeil avec une vm sur ton site.

Oui je sais bien lol

Non pas de mac

parsimonhi a écrit :
Plus sérieusement, il y a une énorme règle css, qui, si on la désactive, laisse voir les images :

On se demande à quoi elle sert d'ailleurs. J'imagine qu'il y a une raison, mais elle est surement mauvaise.

Oui y'a une raison qui est toute simple mais j'ai pas du utiliser la bonne méthode

Ca sert à 2 chose ce fichier CSS là.
1°) à afficher un icône pour tous les liens qui quitte mon site
2°) à masquer cet icône sur les images

Après s'il y a mieux comme méthode (et j'en suis presque sûr sauf que je ne la connait pas) pour le faire je suis preneur
Modifié par Breat (17 Feb 2021 - 10:15)

Bonjour,

Breat a écrit :
Ca sert à 2 chose ce fichier CSS là.
1°) à afficher un icône pour tous les liens qui quitte mon site
2°) à masquer cet icône sur les images

Tu ferais mieux, pour les liens qui doivent avoir une icône, de leur mettre une classe spécifique, pour faire la différence avec les liens qui sont sous forme d'image, par exemple "withIcon".

Et ensuite, tu supprimes dans ton css cette règle horriblement grassouillette. Et tu la remplaces par un truc du genre :

a.withIcon {...}

et/ou

a.withIcon:after {...}

Au moins, ce sera propre et facile à gérer, tes liens avec des images n'étant plus parasités par ces histoires d'icône.

Ceci dit, il doit y avoir autre chose comme effet de bord avec ces histoires de :after. Il faudrait que tu testes de manière plus approfondie ce point.

EDIT: et de toute façon, ton histoire d'icône n'a pas l'air de fonctionner même sur les liens derrière lesquels il devrait y en avoir une.

Amicalement,
Modifié par parsimonhi (17 Feb 2021 - 11:31)

parsimonhi a écrit :
Bonjour,

Tu ferais mieux, pour les liens qui doivent avoir une icône, de leur mettre une classe spécifique, pour faire la différence avec les liens qui sont sous forme d'image, par exemple "withIcon".

Et ensuite, tu supprimes dans ton css cette règle horriblement grassouillette. Et tu la remplaces par un truc du genre :

a.withIcon {...}

et/ou

a.withIcon:after {...}

Au moins, ce sera propre et facile à gérer, tes liens avec des images n'étant plus parasités par ces histoires d'icône.

Ceci dit, il doit y avoir autre chose comme effet de bord avec ces histoires de :after. Il faudrait que tu testes de manière plus approfondie ce point.

EDIT: et de toute façon, ton histoire d'icône n'a pas l'air de fonctionner même sur les liens derrière lesquels il devrait y en avoir une.

Amicalement,

Ok je vais voir ça,, effectivement ça sera plus propre, mais j'avais fait cette méthode grassouillette pour n'avoir QUE les liens avec image à gérer car pour les autres c'était automatique.

Si ça fonctionne du moins sur PC et Android, comme on peut le voir avec le lien avant la liste des images avec le lien vers W3C.

- edit -
alors j'ai supprimé mon lien vers mon css "pourri" et j'ai mis la classe "externalicon" aux liens où je voulais avoir l'icône avec le css suivant :

a.externalicon:after {
    content: "\f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    padding-left: 3px;
}

Ca marche sur PC mais sur iOS ça affiche un carré au lieu de l'icône par contre j'ai bien mes images sur iOS maintenant.

De plus j'ai remarqué que ma classe "img-fluid" de bootstrap qui permet de rendre l'image responsive n'était pas prise en compte sur toutes les images sur iOS bien qu'elle soit présente dans le code.
Modifié par Breat (17 Feb 2021 - 14:58)

Bonjour,

Breat a écrit :
Ca marche sur PC mais sur iOS ça affiche un carré au lieu de l'icône

Ces icônes n'ont jamais marché quelque soit le navigateur (chrome, firefox, safari) sur mac OS. Ailleurs, je ne sais pas.

Note qu'il y avait (et qu'il y a encore juste maintenant) des erreurs dans la console concernant les favicons, et que c'est peut-être ça qui empêche les icônes de s'afficher.

Amicalement,

parsimonhi a écrit :
Ces icônes n'ont jamais marché quelque soit le navigateur (chrome, firefox, safari) sur mac OS. Ailleurs, je ne sais pas.

Ok je pouvais donc chercher longtemps
Du coup est-ce que glyphicons ou autres trucs du genre fonctionnent ? ou ils sont tous bloqué sur les iMatos ?

parsimonhi a écrit :
Note qu'il y avait (et qu'il y a encore juste maintenant) des erreurs dans la console concernant les favicons, et que c'est peut-être ça qui empêche les icônes de s'afficher.

Je ne vois pas les erreurs concernant les favicons dans ma console.
Voici le contenu de ma console :

Failed to load resource: net::ERR_CONNECTION_RESET
bootstrap.min.js:6 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (bootstrap.min.js:6)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6
external_links.min.js:1 Uncaught ReferenceError: $ is not defined
    at external_links.min.js:1
(index):1 Access to font at 'https://static.breat.fr/webfonts/fa-solid-900.woff2' from origin 'https://breat.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
fa-solid-900.woff2:1 Failed to load resource: net::ERR_FAILED
(index):1 Access to font at 'https://static.breat.fr/webfonts/fa-solid-900.woff' from origin 'https://breat.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
fa-solid-900.woff:1 Failed to load resource: net::ERR_FAILED
(index):1 Access to font at 'https://static.breat.fr/webfonts/fa-solid-900.ttf' from origin 'https://breat.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
fa-solid-900.ttf:1 Failed to load resource: net::ERR_FAILED
DevTools failed to load SourceMap: Could not load content for  https://static.breat.fr/js/lightbox-plus-jquery.min.map:  HTTP error: status code 300, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for  https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js.map:  
DevTools failed to load SourceMap: Could not load content for  https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css.map:

- Pour le bootstrap qui trouve pas jquiry, il se paie ma tête car il est bien présent dans le code juste avant

- Pour mon external_links.min.js, là j'ai juste pas compris le problème et c'est la 1ère fois que ça s'affiche alors que ce fichier js est présent depuis toujours.

- Pour les polices fontawesomes elles sont bien présentent vu que ça fonctionne sur le PC donc idem je pige pas.

- Pour lightbox-plus-jquery.min.map je l'ai ajouté en lightbox-plus-jquery.min.js et non .map donc si il cherche pas ce que je lui demande bah j'y peu rien et le .js est bien présent

- Pour les bootstrap.min js et css, comme ils sont pas sur mon hébergeur c'est pas ma faute non plus.

Après bien sûr je suis ouvert à toute suggestion (autre que virer bootstrap dans l'immédiat bien que ce soit prévu) pour corriger tout ça.