18041 sujets

Questions générales et questions de débutants

[Résolu] Problème de compatibilité de navigateur

Bonjour à tous

Je tombe sur un problème dont je ne comprends pas l'origine avec la page http://tests.osirisnet.net/docu/akhenaton/akhenaton_02.html (et d'autres du même style)
Avec FireFox, Edg et IE, cette page s'affiche correctement
Avec Chrome, certaines images des "groupes d'images" (dit "clusters" dans ma terminologie) sont réduites à 0x0 sans que je comprenne pourquoi.
Il y a vraisemblablement un problème de CSS, car la partie générée par JS semble à première vue identique avec touts les navigateurs.
Pourriez vous jeter un œil sur cette page et me dire ce que vous en pensez?
Merci de votre aide

Captures d'écran: en haut avec Edge au dessous avec Chrome:
http://tests.osirisnet.net/migration/outils/capture2.png
Modifié par PapyJP (18 Nov 2016 - 16:09)
Bonsoir PapyJp,
tout d'abord je pense que les dev's de Chrome ne sont pas exempts de bugs plutôt stupéfiants ; c'est ce que j'ai vécu il y a un an pour des effets de transition CSS3 impossibles que 20 mille internautes ont également connus. Ce bug agaçant n'affectait que 20 mille Chrome sur ordi où peu importait l'OS, et pas d'autres milliards. Puis il a été fixed par la suite, et sans explication de Google deux mois + tard. Mais entretemps nous étions 20 mille à passer pour des gogos plutôt inaptes au web ... J'en retiens que Google par son avatar Chrome, à force de capter nos élucubrations sur le web en avait malencontreusement induit ou déduit une coquille . Et là ! cela a été délicieux.

Ceci n'explique pas nécessairement ton décrochage d'img, mais à-vrai-dire tes 2 screenshots ne représentent pas vraiment un prob : alors ?

Edit : -"Ha si ! pardon"!, une img manque effectivement : -"Huuu "!

A défaut de comprendre ce qui arrive à ton CSS3, n'hésite pas à surfer le web qui puisse te retourner d'un bug-de-chez-Chrome, et de multiples fois jusqu'au 1er janvier 2017 car ce qui est bien connu aujourd'hui, c'est que Chrome argumente sa vélocité magique mais au dépit de ... presque tout autre chose, dont la bonne application du CSS3.

Je me réjouis en aparté que FireFox eût voulu exister.
Modifié par pictural (18 Nov 2016 - 20:47)
Merci de ta réponse
Je suis bien d'accord sur tout ce que tu dis, en particulier le côté dominateur, amateur et "je-me-fous-des-utilisateurs" de Google, mais ce sont eux qui ont le gros bâton, il faut bien en passer par ce qu'ils font.
Dans le temps, ces caractéristiques étaient celles de Microsoft, avant c'était IBM. Toute position dominante conduit inéluctablement à ce comportement.
Faute de comprendre ce qui se passe, il ne me reste sans doute qu'à tâtonner jusqu'à trouver quelque chose qui marche...
Modifié par PapyJP (18 Nov 2016 - 22:21)
Tu peux d'abord et surtout demander à des amis de t'envoyer des screenshots de la page envisagée avec Google-Chrome.

Moi ? J'ai supprimé Google-Chrome de mon ordi ...
Modifié par pictural (18 Nov 2016 - 23:03)
Et ce n'est peut-être pas pour rien que d'autres nav-web très performants "gratuits" ou "moins-gratuits" existent aujourd'hui avec leur bot of request ! C'est trop-facile-de-créer un tel bot en 3 clicks ...
Modifié par pictural (19 Nov 2016 - 00:24)
Bonjour,

Le problème provient de la classe 'cluster' situé dans une balise figure. Quelle règle influe exactement ? Je ne sais pas. Teste les les unes après les autres...
Merci à tous pour vos réponses nocturnes et matinales.
Il s'agit bien sûr de la classe cluster et de la façon dont elle influe sur les "row" et "diapo" qu'elle contient.
Le but de cette balise est de regrouper des images en remplacement de <table> qui avaient un côté statique lourdingue et n'étaient pas responsive. En me lançant dans cette nouvelle approche je ne me doutais pas des conséquences. En gros il n'est pas possible de traiter cela par du pur CSS. J'ai besoin d'un programme js assez complexe et le CSS qui l'accompagne n'est pas simple à mettre au point. L'essai d'introduire des flexbox n'a fait que rendre les choses plus compliquées sans aucun intérêt.
Je vais remettre l'ouvrage sur le métier pour au moins la vingtième fois
En tâtonnant, j'ai découvert que la propriété "coupable" était 
.diapo img{max-height:100%;}

Le traiement des hauteurs en CSS est toujours aussi mal fichu: si on ne donne pas spécifiquement par CSS une hauteur à un élémément, la hautuer qu'il prend finalement n'est pas prise en compte, et apparemment Chrome considère non pas qu'elle est indéfinie et qu'il ne faut pas tenir compte de cette propriété dans les balises incluses, mais qu'elle vaut effectivement 0.
C'est d'autant plus incompréhensible que justement dans l'exemple cité la balise "mère" <figure class="diapo"> contient spécifiquement style="height:252px"
Du temps où je faisais de l'informatique professionnellement, on appelait cela un bug, mais je suppose que chez Google on appelle cela une "interprétation stricte des standards" ??? !!!
Modifié par PapyJP (19 Nov 2016 - 13:11)
Sujet clos
Aller à