Partage
  • Partager sur Facebook
  • Partager sur Twitter

Flash blanc entre l'affichage de 2 pages

    18 février 2016 à 8:18:55

    Bonjour tout le monde,

    J'ai créé un site web pour ma commune et je constate un bug sur lequel je sèche complètement. 

    Je me permets donc de vous solliciter afin de pouvoir (enfin) le résoudre.

    Je constate la présence d'un "flash blanc" entre le passage d'une page à l'autre du site. Ce phénomène ne se reproduit qu'avec Chrome (pas de souci avec IE et Firefox) et n'apparaît pas en local, y compris sous Chrome.

    J'avoue être sec là dessus.

    Merci d'avance à tous pour votre attention et votre aide ;) 

    Adresse du site : www.saintaugustin-19.fr

    • Partager sur Facebook
    • Partager sur Twitter
      18 février 2016 à 8:38:45

      Salut,

      je pense que c'est tout simplement le temps de chargement de la page qui est plus long.
      L'image en background met plus de temps à se charger dans Chrome.

      Peut-être la mise en cache qui ne se fait pas correctement dans Chrome.

      Ps ; rien à voir avec ton problème mais il y a un truc bizarre sur ton site.
      Même quand la page ne va pas jusqu'en bas de la fenêtre il y a une barre de scroll.

      Et autre chose d'important, JAMAIS de commentaire avant le doctype. Sinon tu va avoir des surprises avec IE.

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
        18 février 2016 à 8:45:22

        Hello !

        Pour la barre de scroll latérale, c'est fait exprès, je force l'affichage afin d'éviter un décalage visuel lorsque l'utilisateur passe d'une page "courte" (qui ne nécessite pas de barre scroll) à une page "longue" (qui elle nécessite la barre scroll).

        Je viens de déplace le commentaire, merci beaucoup pour l'info ;)

        Pour l'affichage du background, verrais-tu une solution ?... et pourquoi cela ne pose problème qu'avec Chrome et uniquement en ligne et non en local, d'après toi ? 

        Cela dit, suis pas sûr que ce soit un problème sur le background :/ 

        -
        Edité par Ouebmaster_ETC 18 février 2016 à 8:46:50

        • Partager sur Facebook
        • Partager sur Twitter
          18 février 2016 à 8:50:52

          Pour ta barre, ok par soucis de design et de décalage désagréable.
          Mais le problème n'est pas qu'elle soit présente mais qu'on puisse scroller de quelques pixel.
          Comme si, même si le contenu ne va pas jusqu'en bas, ça dépassait de la fenêtre.

          Je n'ai pas de solution pour ton problème... Peut-être forcer la mise en cache de l'image.
          parce que pour moi ça vient de là.
          Fais un test simple, mets une couleur de background bien violente, genre rouge.
          Si tu le vois avant de voir l'image, c'est bien un problème de chargement de cette image qui est plus long.
          Après, pourquoi sur chrome, pourquoi pas en local, je n'en ai aucune idée...

          -
          Edité par Frogweb 18 février 2016 à 8:52:21

          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
            18 février 2016 à 8:58:27

            Le truc, c'est que le height doit être à 101% pour que la barre scroll soit présente et, du coup, le scroll de quelques pixels (qui ne sert à rien, je suis bien d'accord) est possible.
            Je n'ai pas trouvé d'autres solutions pour éliminer ce décalage.

            -
            Edité par Ouebmaster_ETC 18 février 2016 à 8:59:04

            • Partager sur Facebook
            • Partager sur Twitter
              18 février 2016 à 9:02:16

              Test effectué, effectivement le flash disparaît lorsque le backgound n'appelle plus l'image mais une couleur.
              • Partager sur Facebook
              • Partager sur Twitter
                18 février 2016 à 9:07:01

                J'ai modifié la taille du background et, du coup, le flash n'est plus. Par contre, il subsiste le même phénomène sur le corps du site, au niveau du background du header et du menu gauche.
                Comment puis-je forcer la mise en cache de ces images ? 

                -
                Edité par Ouebmaster_ETC 18 février 2016 à 9:09:07

                • Partager sur Facebook
                • Partager sur Twitter
                  Staff 18 février 2016 à 9:17:46

                  Pour forcer l'affichage de la barre de défilement : body { overflow-y: scroll; }, c'est plus élégant :)

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                    18 février 2016 à 9:21:13

                    Merci pour le code pour la barre scroll, en effet c'est bien plus élégant :)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      20 février 2016 à 10:45:34

                      J'ai beau chercher sur le net et balayer mon code dans tous les sens, je ne comprends toujours pas le pourquoi de ce flash.
                      J'ai contourner l'inconvénient en modifiant le background du site. Par contre, comme dit plus haut, le flash subsiste (même si plus léger car le PNG est moins lourd) sur le header et le menu de gauche.

                      Ce qui me semble très étonnant, c'est que je n'ai constaté ce dysfonctionnement que depuis peu et que je suis convaincu à 100% qu'il n'existait par auparavant.

                      Y'a t'il une solution pour forcer la mise en cache des IMG (car cela semble réagir comme si la mis en cache ne se faisait pas) ?

                      Précision : si l'on navigue, on peut apercevoir que (par instants), le flash n’apparaît plus. Si vous le souhaitez, faites des aller-retour entre les onglets Accueil et Contacts & Météo pour le constater.

                      -
                      Edité par Ouebmaster_ETC 20 février 2016 à 10:49:36

                      • Partager sur Facebook
                      • Partager sur Twitter
                        15 mars 2016 à 17:13:34

                        Bon, après quelques recherches (et surtout un long stand by sur le sujet), je reviens à la charge pour solliciter vos avis.

                        En fait, après plusieurs tests, la conclusion est la suivante : lorsque le background image est appelé à partir de la feuille CSS, j'ai un flash blanc.
                        Si je rentre le code relatif à l'affichage de l'image directement dans le html de la page, je n'ai plus le flash.

                        Cela pourrait donc sous entendre que le problème vient de la feuille css...  ou pas ?

                        Quels sont vos avis là dessus ? 

                        • Partager sur Facebook
                        • Partager sur Twitter
                          Staff 15 mars 2016 à 17:23:46

                          C'est normal : une requête http pour le CSS, puis une autre requête http pour aller chercher l'image appelée par le CSS. Pour réduire cet effet, il est conseillé de mettre en plus un background-color d'une couleur approchante, pour avoir une transition plus en douceur.

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                            15 mars 2016 à 17:29:55

                            Oui, sauf que le flash est présent sur des img super légères... chose qui ne se produisait pas avant... et constat uniquement sur Chrome.
                            Si on doit remplacer toutes les background image par des color sous prétexte une la moindre img produit un flash sous Chrome... ça va être vite la misère !
                            • Partager sur Facebook
                            • Partager sur Twitter
                              Staff 15 mars 2016 à 17:30:30

                              Pas remplacer. Ajouter. Et c'est une bonne pratique à la base, donc on devrait le faire à chaque fois, quelle que soit l'image.

                              -
                              Edité par Lamecarlate 15 mars 2016 à 17:31:03

                              • Partager sur Facebook
                              • Partager sur Twitter
                              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                16 mars 2016 à 7:44:50

                                J'entends le conseil.
                                Pour autant, qu'une img en background de 50k ne puisse pas s'afficher sans un flash... j'avoue ne pas comprendre et tenter de masquer le truc plutôt que de comprendre pourquoi il se produit ne me satisfait pas.

                                Tu vois ce que je veux dire ? ;)
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  Staff 16 mars 2016 à 8:23:01

                                  Mettre une couleur de fond n'est pas masquer le truc.

                                  Est-ce que tu pourrais nous donner une page en ligne pour qu'on expérimente le souci nous-même ?

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                    17 mars 2016 à 7:27:47

                                    Oui bien sûr, avec plaisir.

                                    www.saintaugustin-19.fr

                                    On peut constater le flash, entre autres, sur le header (il suffit de naviguer d'un onglet à l'autre).

                                    Code sur la feuille css :

                                    #header{
                                      width:731px;
                                      height:90px;
                                      margin:0 5px 0 5px;
                                      background-image: url(pictures/header8.png);
                                    }

                                    NB : le flash n'est constaté qu'avec la navigateur Chrome

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      Staff 17 mars 2016 à 8:24:05

                                      Tu as lu le message de Frogweb plus haut ?

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                        17 mars 2016 à 8:45:54

                                        Salut,

                                        vide le cache de Chrome. Pour ma part je n'ai plus le soucis depuis que tu as changé l'image de background.

                                        -
                                        Edité par Frogweb 17 mars 2016 à 8:46:43

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                                          17 mars 2016 à 16:18:39

                                          @ Frogweb :

                                          Oui, moi non plus je n'ai plus de flash sur le body background depuis que j'ai changé l'img.
                                          Mais bon, j'ai quand même toujours le même problème sur les background du header, et de la colomne, qui affichent des img de très petites tailles. 

                                          @ Lamecarlate :

                                          Oui, j'ai bien lu le message de Frog et je suis tombé sur ça : http://www.creativejuiz.fr/blog/tutoriels/mettre-en-cache-les-fichiers-statiques-de-votre-site-web-htaccess

                                          Pour autant, je ne suis pas un professionnel, et j'avoue que je n'y ai pas compris grand chose :/

                                          J'ai créé un .htaccess avec ce code, que j'ai mis à la racine du site... mais ça ne change rien. 

                                          ## contrôle du cache navigateur - Expire headers
                                          <IfModule mod_expires.c>
                                          	ExpiresActive On
                                          	ExpiresDefault "access plus 7200 seconds"
                                          	ExpiresByType image/jpg 			"access plus 1 week"
                                          	ExpiresByType image/jpeg 			"access plus 1 week"
                                          	ExpiresByType image/png 			"access plus 1 week"
                                          	ExpiresByType image/gif 			"access plus 1 week"
                                          	ExpiresByType image/svg+xml			"access plus 1 week"
                                          	AddType image/x-icon .ico
                                          	ExpiresByType image/ico 			"access plus 1 week"
                                          	ExpiresByType image/icon 			"access plus 1 week"
                                          	ExpiresByType image/x-icon 			"access plus 1 week"
                                          	ExpiresByType text/css 				"access plus 1 week"
                                          	ExpiresByType text/javascript 		"access plus 1 week"
                                          	ExpiresByType text/html 			"access plus 7200 seconds"
                                          	ExpiresByType application/xhtml+xml 	"access plus 7200 seconds"
                                          	ExpiresByType application/javascript 	"access plus 1 week"
                                          	ExpiresByType application/x-javascript 	"access plus 1 week"
                                          	ExpiresByType application/x-shockwave-flash "access plus 1 week"
                                          </IfModule>
                                          <IfModule mod_headers.c>
                                          
                                          <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
                                          Header set Cache-Control "max-age=2592000, public"
                                          </FilesMatch>
                                          
                                          <FilesMatch "\\.(css)$">
                                          Header set Cache-Control "max-age=604800, public"
                                          </FilesMatch>
                                          
                                          <FilesMatch "\\.(js)$">
                                          Header set Cache-Control "max-age=216000, private"
                                          </FilesMatch>
                                          
                                          <FilesMatch "\\.(x?html?|php)$">
                                          Header set Cache-Control "max-age=600, private, must-revalidate"
                                          </FilesMatch>
                                          
                                          </IfModule>
                                          Header unset ETag
                                          FileETag none


                                           Pourriez-vous me filer un p'tit coup de main svp... ou me dire concrètement ce que je dois faire ? ;)

                                          -
                                          Edité par Ouebmaster_ETC 18 mars 2016 à 7:44:09

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            19 mars 2016 à 9:20:49

                                            Personne pour me guider et tenter de me faire progresser ?
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              21 mars 2016 à 7:26:17

                                              Juste pour savoir... pourquoi plus aucun message ?

                                              J'ai commis une erreur déontologique ?

                                              La collaboration et l'entraide sont réservées à un cercle d'initiés ? 

                                              J'aimerai simplement avoir l'info, parque je pensais que le forum était un lieu dans lequel on pouvait espérer des échanges et, par le fait, progresser.

                                              :(
                                               

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                Staff 21 mars 2016 à 8:41:32

                                                Pour ma part, je n'ai plus répondu parce que je m'y connais peu en cache, je ne saurais t'aider plus loin, désolée. Tu n'as rien fait de mal :)

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                                  21 mars 2016 à 11:42:06

                                                  Même réponse que Lamecarlate ^^
                                                  Désolé mais ça dépasse mes compétences...

                                                  Après peut-être as-tu bien fait les choses mais ça n'a pas résolu ton problème.
                                                  c'est peut-être un bug de Chrome.

                                                  Par contre je te donne un conseil : jamais rien avant le doctype et surtout pas de commentaire.

                                                  Ah, et puis de temps en temps on fait autre chose que d'être sur le forum....

                                                  -
                                                  Edité par Frogweb 21 mars 2016 à 11:43:07

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                                                    21 mars 2016 à 18:57:22

                                                    Me voilà rassuré ! :)

                                                    Sinon, Frogweb, même chose pour moi... je bosse aussi hein ^^
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      22 mars 2016 à 7:46:57

                                                      Ce qui est étonnant, c'est que ce flash n'existe qu'avec Chrome online (en test local il n'apparaît pas).
                                                      Si c'est un bug Chrome (ce qui paraît une conclusion logique), je suis très étonné de ne trouver aucun autre témoignage allant dans ce sens sur le Web.

                                                      :/
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter

                                                      Flash blanc entre l'affichage de 2 pages

                                                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                      • Editeur
                                                      • Markdown