search

hverlin / site_integration

2 stars 0 forks source link

Volet gauche s'affichant sur ecran a petite largeur #2

Closed LoicTouzard closed 9 years ago

LoicTouzard commented 9 years ago

En faisant un tour sur ta branche Ealhad, j'ai vu un bug qui n'est pas présent sur la branche master. Pour voir ce bug il faut :

:arrow_right: Le volet de gauche apparaît puis disparait. L'affichage final est le même, mais ce volet n'est pas sensé s'afficher pour repartir ensuite au chargement de la page. Après avoir comparé cette brève apparition n'est pas présente sur master. Essaye de la corriger avant de fusionner ta branche dans master. Je n'ai pas regardé ton code donc je ne sais pas d'où ça peut venir, mais si tu ne trouves pas demande moi, je m'y pencherais aussi.

PS: Tests effectués sur Mozzilla 39

ghost commented 9 years ago

Bug présent sous Chrome aussi. C'est chelou, j'ai pas touché à ça normalement :/ Je cherche.

LoicTouzard commented 9 years ago

Ok je pense savoir d'où ça vient. Et j'ai probablement une solution. :+1:

Le problème

Tu as inséré sur la page un bon nombre de <iframe>, qui d'autant plus sont des maps. Ces balises ralentissent le chargement de la page, et donc retardent le passage dans la fonction jQuery $(document).ready or c'est dans cette fonction que sont cachés tous les éléments (ici), pour qu'ils soient ensuite montrés ou non avec leurs animations repectives. Retarder la fin du chargement de la page fait que l'utilisateur a le temps de voir ses block normalement invisibles pour sa résolution, avant qu'ils ne soient cachés.

La solution

Tu peux laisser les <iframe> mais il faudrait mettre leur attribut srcà vide. Dans les balises a actionnant le toggle des map rajoute un attribut data qui permettra de stocker l'url que doit charger l'iframe, par exemple : <a class="btn btn-danger btn-sm togglemap" data-map-src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCYG3-5euwVqnAeuqUj4gJ8dfvtHOnBZBc&zoom=15&q=loc:45.784136+4.882584"> Puis sur le click de cette balise <a>, tu vas chercher la balise <iframe> correspondante et si son attribut src est vide, donne lui la valeur stockée dans le <a>. Changer le src d'une balise <iframe> la recharge automatiquement.

Pour finir

Le contenu ne sera ainsi plus chargé au début, mais seulement quand l'utilisateur le demande !

En esperant que ma solution te convienne (et qu'elle fonctionne, mais normalement ça devrait résoudre le problème !).

ghost commented 9 years ago

Je ne suis pas tout à fait d'accord. Même si ça me semble une meilleure pratique de charger les cartes sur demande, évidemment.

C'est l'explication qui pose problème : Je viens de tester un console.log() dans le $(document).ready() (tout à la fin, même), et la page est en réalité chargée à peu près instantanément.

ghost commented 9 years ago

Bon, le fix marche. Mais c'est louche, tout ça :suspect:

LoicTouzard commented 9 years ago

Autre piste : Après ton fix j'ai réessayé et le problème était toujours présent sur mon Firefox. J'ai ouvert Chrome, aucun problème. J'ai fermé les 50 onglets que j'avais d'ouverts sur Firefox, et c'était réglé ! Je lui en demandait peut être trop :innocent: ça a donc un lien avec la puissance du navigateur, mon Firefox était surchargé et mon Chrome tout juste ouvert. Ca peut potentiellement affecter leur vitesses d'execution du JS respectives.

ghost commented 9 years ago

Le fait est que le moteur JS de Chrome est un peu plus performant, et qu'en plus les onglets sont gérés différemment sous les deux navigateurs.

ghost commented 9 years ago

Précisons quand même que depuis Angular, ça refait un petit peu la même chose :p

ghost commented 9 years ago

Précision : sous Firefox pas de problème, c'est au moins sous Chrome que ça déconne.

Même que ça marche dans IE 11. (enfin, juste ça, parce qu'on peut pas voir la timeline :D )

hverlin commented 9 years ago

J'ai pas vu le problème tu as une capture d'écran ? Le 7 août 2015 18:36, "Ealhad" notifications@github.com a écrit :

Précision : sous Firefox pas de problème, c'est au moins sous Chrome que ça déconne.

Même que ça marche dans IE 11. (enfin, juste ça, parce qu'on peut pas voir la timeline :D )

— Reply to this email directly or view it on GitHub https://github.com/hverlin/site_integration/issues/2#issuecomment-128758486 .

ghost commented 9 years ago

screen

Chrome 44.

(ça dure pas longtemps, j'ai bien galéré :p )

hverlin commented 9 years ago

Ah pas beau Le 8 août 2015 01:56, "Ealhad" notifications@github.com a écrit :

[image: screen] https://cloud.githubusercontent.com/assets/9056295/9147997/b5fb1d24-3d70-11e5-9969-6d63785d8e44.png

Chrome 44.

— Reply to this email directly or view it on GitHub https://github.com/hverlin/site_integration/issues/2#issuecomment-128863331 .

LoicTouzard commented 9 years ago

Je suis sur le coup ! ;) Pour voir le bug se reproduire, allez sur Chrome et changez le débit réseaux dans le device mode. Device Mode réseaux

LoicTouzard commented 9 years ago

Avec 500ms de ping et un modem 56k sur Chrome, le bug n'apparaissait plus chez moi. (Depuis la correction) Et vous ?

hverlin commented 9 years ago

J'ai jamais eu ce bug pour ma part Le 8 août 2015 11:17, "Loïc Touzard" notifications@github.com a écrit :

Avec 500ms de ping et un modem 56k sur Chrome, le bug n'apparaissait plus chez moi. Et vous ?

— Reply to this email directly or view it on GitHub https://github.com/hverlin/site_integration/issues/2#issuecomment-128943346 .

ghost commented 9 years ago

Testé, approuvé, synchronisé !