Bonjour,

Sur un site développé avec WordPress auquel s'ajouté un script important et des css et destiné à tous types de périphériques d'affichage et aux navigateurs les plus courants, je rencontre un bug bizarre auquel je n'ai pas trouvé de solution.

Le phénomène se produit de manière variable :
  • Sur certains documents (répétitif)
  • De manière différente suivant le navigateur dans le cas des documents défaillants (listes d'articles) :
    • RAS sur PC (Chrome, Opera, Firefox, Edge)
    • Sur Android mobile (Galaxy S7) : les éléments fixes sont cadrés à droite sur le cadre "innerHTML" au lieu de window.width (géré en partie avec JQUERY). Il est possible de zoomer (mais on perd la visibilité des éléments right:0;
    • Firefox mobile (Galaxy S7): éléments fixes (right 0) sont dans la zone affichée (window.width mais pas à 0, il y a un facteur de zoom ?), l'image peut être déplacée et zoomée, les éléments se déplacent et changent de taille de manière très erratique : inutilisable.




Le phénomène essentiel:

Pour certaines pages (pas toutes et non testée sur mobile), des éléments (les premiers dans "body") positionnés fixes (position:fixed; right:0 se positionnement par rapport a "window.innerWidth - ou == outerWidth au lieu de window.width en l'occurence 677 au lieu de 360 sur un Samsung S7).

La conséquence est que de manière automatique l'échelle d'affichage de tous les éléments est modifiée dans le facteur (360/677, et versus 640/1057 en hauteur).
En particulier l'ensemble de "body" apparaît sur un demi largeur d'écran.
Un scroll horizontal est possible sur les pages en cause.
Le site pour ces pages est ainsi inutilisable.
Il est possible de zoomer mais les icônes fixes placées à droite qui ouvrent des volets latéraux deviennent inaccessibles et les éléments se déplacent et changent de taille de manière totalement erratique avec Firefox.

Ma conclusion :
- des définitions de css (queries) ne sont pas prises correctement en charge (valeurs exprimées en em, vh et calc) et conduisent à un comportement erratique.
- pour les états en cause : une valeur de css ou des attributs gérés pas JQuery sont mal interprétés.
- certains scripts ne sont pas exécutés (dimensionnement d'éléments, montrer-cacher etc...)
- aucune explication sur le facteur déclenchant (les pages "standard" sont fixes et nécessitent des mises au point de css pour un cadrage correct en fonction des navigateurs et des mobiles)

Mes réflexions sur le développement net pour mobiles :
Peut-être faut-il en l'état de la technique développer une application par navigateur x périphérique existant (je n'ai que 12 applis en une)?
J'ai testé 4 mobiles, j'ai 14 queries pour les css, des cas particuliers par navigateur (test sur Chrome, Firefox, Opéra, Edge, IE11)
Faut-il aujourd'hui développer 50 à 60 versions d'un site pour avoir un site stable visible sur tout support ?
Le volume de mes css et de scripts par rapport à la version PC a été multiplié par 4, et je trouve tous les jours de cas de dysfonctionnements.
Il semblerait qu'il n'y ait toujours aucune stabilité ni un cœur de comportements stable des navigateurs.
Pourtant mon outil de développement "phpstorm" ne me signale pas de problème.

A près deux ans de travail et ce nouvel incident je désespère de pouvoir mettre le site en service.

Je n'ai aucune idée de cette dernière cause d'anomalie et je n'ai trouvé aucun remède.

Je n'ai pas de piste. HELP

Cordialement

Trebly