Issues with domready—animation flickering on page load.

[piotrfonte]

I’m having a hard time getting around an issue that I think has to do with domready. Each time I load my site (https://piotrf.pl) the plain keyframe CSS animations are being triggered twice, which causes an awkward flickering: https://s3-us-west-2.amazonaws.com/dropbox.piotrf.pl/Untitled.mov

Note how this flickering occurs only on server, not on hotloaded localhost. Here’s why I think domready might be involved:

Has anyone encountered a similar issue?

[migs540]

Yes I've been looking into this for the past two days. I have the same symptoms - keyframes get triggered twice on initial load. What I have noticed so far is:

• I'm now using a poor workaround at futurebrilliant.team : I have disabled keyframes on the initial (index.js) page. I have keyframe animations on linked pages (sub-pages). With this workaround if a user lands on index then they don't see a keyframe animation. While reading the index page js and sub-pages load in. When they navigate to a sub-page they see one keyframe. If, however, they land on a subpage (first) then they see the keyframe animation being triggered. It's due to timing.

• Slowing the load down using dev tools network (slow 3G), I can see the animation is triggered twice. The first time on html load. The second time is when any of the "bootstrap" js or domlazyload are downloaded. see photo.

• I wonder if it is to do with styled-components? It might be worth inlining animations (css) to see if that makes a difference?

• I built a test example from https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image - I made a few edits to the original. I added styled-components. I added a keyframe animation and a H1 heading and a div/box that obscures the background image. It's this div box that is animated as a 1 second transition in. Take a look at it, I've put it up temporarily at: trustingcustomers.com

• Here's the code for index.js showing the keyframes css:

import React from "react"
import Link from "gatsby-link"
import Img from "gatsby-image"
import Navigation from "../components/navigation"

import { rhythm, options } from "../utils/typography"
import { injectGlobal, css, keyframes } from "styled-components"
import styled from "styled-components"

const swingDown = keyframes`
  100% { transform: translateX(0%); }
`

export const AboutContents = styled.div`
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  animation: ${swingDown} 1s forwards;
  animation-fill-mode: forwards;
  position: relative;
  z-index: 10;
  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
`

[migs540]

@PiotrF your animation keyframe runs twice when google analytics runs:

Request URL:https://www.google-analytics.com/r/collect?v=1&_v=j66&a=1842669742&t=pageview&_s=1&dl=https%3A%2F%2Fpiotrf.pl%2F&dr=https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fissues%2F3067&dp=%2F&ul=en-gb&de=UTF-8&dt=Piotr%20F.%20%E2%80%94%20Product%20designer%20%26%20front-end%20developer%E2%80%94An%20overall%20full-stack%20UX%20design%20specialist&sd=24-bit&sr=1024x1366&vp=1024x1366&je=0&_u=QACAAEAB~&jid=1921053810&gjid=1402211187&cid=1278082317.1511965245&tid=UA-22031199-1&_gid=784946713.1511965245&_r=1&z=209848835
Request Method:GET
Status Code:200
Remote Address:172.217.25.174:443
Referrer Policy:no-referrer-when-downgrade

[piotrfonte]

@migs540 I can confirm that your sample seems to be suffering from the very same issue I’m having. Happens only on the first page load. Once the site’s been cached, it’s ok.

[piotrfonte]

@migs540 I thought it was Google Analytics, then I disabled it but the issue persisted. I now have re-enabled it.

[migs540]

@PiotrF Yes. It was behaving strangely for me which is why I ran up a version of https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image at trustingcustomers.com

Keyframes are CSS. So CSS is being run twice? Or part of the DOM is updating triggering CSS again? Not sure how CSS works at the dom / virtual dom level.

Here's the point where the second animation occurs. There's an event load and:

[KyleAMathews]

Well this is bad… it sounds like Gatsby is rendering twice perhaps? What happens if you add a console.log to the render function?

Could one of you create a small reproduction site I could look at? E.g. your using-gatsby-image fork @migs540

[migs540]

@KyleAMathews I created a new repository (because I couldn't work out how to fork just a subsection of gatsbyjs): https://github.com/migs540/debug-animations-using-gatsby-image

That is what is running at http://trustingcustomers.com/

It comes from the original ( https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image ) with styled-components added and edits to two files: index.js and blur-up.js - both of these have a one second animation for an enclosing div styled with styled-components.

I haven't added a console.log (don't know where) but am wondering if it has anything to do with manipulating the after initial load? But yes, better to follow the logs / load progress and see what is actually happening.

[KyleAMathews]

Awesome! I should have time in the morning to investigate (if you don't solve it of course while I sleep :-))

[migs540]

@KyleAMathews we all win when you are awake.

In short: animations are executed twice. Once in index.html then a second time in componentindex.js:

I added console logging and can see the render is triggered just once in js (in component---src-pages-index-js-2d6cb1471a0df592f43f.js):

...E=(0,T.keyframes)(f),x=t.AboutContents=k.default.div(d,E),A=function(t){function n(){return(0,o.default)(this,n),(0,i.default)(this,t.apply(this,arguments))}return(0,u.default)(n,t),n.prototype.render=function(){return console.log("IndexComponent triggered me during render"),e.createElement...

class IndexComponent extends React.Component {
  render() {
    console.log("IndexComponent triggered me during render")

but well before that the animation is triggered (presumably from index.html:

public 3Legs$ grep animation index.html 
.iVIEdg{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}
.hzuIAT{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}

Video of behaviour (chrome dev tools) at:

http://trustingcustomers.com/consolelogging.mp4

Note: console logging is not in place in the repo I mention above - and you need to do a gatsby build to see the behaviour (gatsby develop triggers it just once because of the way it serves files locally).

[KyleAMathews]

Thanks for all your research + reproduction @migs540. Only had a brief moment to look at it so far but this is definitely a hydration issue — if you disable JavaScript then it only animates once. So now to see if the hydration problem is generic and needs fixed in core or if it's triggered by certain behaviors in sites.

[KyleAMathews]

The problem with your reproduction site is you have both gatsby-plugin-glamor and gatsby-plugin-styled-components added to the config. This broke the client side hydration causing a complete re-render. When I moved the styled-components stuff into a css file and removed gatsby-plugin-styled-components, things started working as expected.

From 7c26a916063a4d04b856cc76e6a0ac53e7aa3053 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Sat, 2 Dec 2017 20:00:42 -0800
Subject: [PATCH] Fix

---
 gatsby-config.js    |   1 -
 package.json        |   1 -
 src/pages/index.css |  13 +++
 src/pages/index.js  |  22 +---
 yarn.lock           | 307 ++++++++++++++++++++++++----------------------------
 5 files changed, 159 insertions(+), 185 deletions(-)
 create mode 100644 src/pages/index.css

diff --git a/gatsby-config.js b/gatsby-config.js
index 55dfd29..90c227a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -2,7 +2,6 @@ module.exports = {
   plugins: [
     `gatsby-plugin-glamor`,
     `gatsby-plugin-netlify`,
-`gatsby-plugin-styled-components`,
     `gatsby-transformer-sharp`,
     {
       resolve: `gatsby-source-filesystem`,
diff --git a/package.json b/package.json
index 8167420..48dd74b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "gatsby-source-filesystem": "^1.5.1",
     "gatsby-transformer-sharp": "^1.6.12",
     "numeral": "^2.0.6",
-    "sharp": "^0.18.4",
     "styled-components": "^2.2.3",
     "typeface-oswald": "^0.0.40",
     "typeface-pt-sans": "^0.0.40",
diff --git a/src/pages/index.css b/src/pages/index.css
new file mode 100644
index 0000000..90f40cd
--- /dev/null
+++ b/src/pages/index.css
@@ -0,0 +1,13 @@
+@keyframes swingDown {
+  100% { transform: translateX(0%); }
+}
+
+.about-div {
+  transform: translateX(-100%);
+  -webkit-transform: translateX(-100%);
+  animation: swingDown 1s forwards;
+  animation-fill-mode: forwards;
+  position: relative;
+  z-index: 10;
+  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index be96fba..2fd39d1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,30 +2,16 @@ import React from "react"
 import Link from "gatsby-link"
 import Img from "gatsby-image"
 import Navigation from "../components/navigation"
+import "./index.css"
 
 import { rhythm, options } from "../utils/typography"
-import { injectGlobal, css, keyframes } from "styled-components"
-import styled from "styled-components"
-
-const swingDown = keyframes`
-  100% { transform: translateX(0%); }
-`
-
-export const AboutContents = styled.div`
-  transform: translateX(-100%);
-  -webkit-transform: translateX(-100%);
-  animation: ${swingDown} 1s forwards;
-  animation-fill-mode: forwards;
-  position: relative;
-  z-index: 10;
-  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
-`
 
 class IndexComponent extends React.Component {
   render() {
+    console.log("rendering")
     return (
       <div>
-        <AboutContents>
+        <div className="about-div">
           <Img
             css={{ top: 0, left: 0, right: 0, zIndex: -1 }}
             style={{ position: `absolute` }}
@@ -128,7 +114,7 @@ class IndexComponent extends React.Component {
               </a>
             </p>
           </div>
-        </AboutContents>
+        </div>
       </div>
     )
   }

[migs540]

OK @KyleAMathews - I suspected it had something to do with how i was using styled-components and can see what you've done here. However, I'd like to use styled-components with gatsby. Is it possible to do the same here and drop the glamor plugin (keeping styled-components)? I tried that a short time ago and it failed (but it was only a quick test).

Is it a case of either glamor or styled-components? Or just styled-components?

I'm a big fan of @mxstbr 's styled components and would love to be able to use it on gatsby to render once.

[piotrfonte]

Is that a general gatsby vs. styled-components issue? Asking as I don’t use glamor, yet have the same problem. Unsure what I can do to help, here’s my config if that hint at anything. Otherwise I can create a simple repo you could work with. Let me know @KyleAMathews.

gatsby-config.js

module.exports = {
  siteMetadata: {
    siteUrl: `https://piotrf.pl`,
    title: `piotrf.pl-v2 (2017)`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-next`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "something"
      }
    },
    {
      resolve: `gatsby-plugin-sitemap`
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
              linkImagesToOriginal: false
            }
          },
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_self",
              rel: "nofollow"
            }
          },
          `gatsby-transformer-sharp`,
          `gatsby-remark-autolink-headers`,
          `gatsby-remark-copy-linked-files`
        ]
      }
    },
    `gatsby-plugin-netlify` // must come in last
  ]
};

[piotrfonte]

@KyleAMathews, I have now create a simple site/repo that you can have a look at: https://priceless-minsky-70fda7.netlify.com/ that gets deployed from https://github.com/piotrf/gatsby-test — any help in solving this flickering mystery much is appreciated.

[sergical]

@KyleAMathews and everyone, resurfacing this as I am having the same issues with my personal site: https://416serg.me/

Plugins I use:

plugins: [
    'gatsby-plugin-react-helmet',
    `gatsby-transformer-sharp`,
    `gatsby-plugin-netlify`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/content/${config.blogPostDir}`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: 'gatsby-remark-responsive-iframe'
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-autolink-headers'
        ]
      }
    },
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        color: config.themeColor
      }
    },
    'gatsby-plugin-sharp',
    `gatsby-transformer-sharp`,
    'gatsby-plugin-catch-links',
    'gatsby-plugin-twitter',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'minimal-ui',
        icons: [
          {
            src: '/logos/logo-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/logos/logo-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-plugin-feed',
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata;
          ret.allMarkdownRemark = ref.query.allMarkdownRemark;
          ret.generator = 'GatsbyJS Material Starter';
          return ret;
        },
        query: `
        {
          site {
            siteMetadata {
              rssMetadata {
                site_url
                feed_url
                title
                description
                image_url
                author
                copyright
              }
            }
          }
        }
      `,
        feeds: [
          {
            serialize(ctx) {
              const rssMetadata = ctx.query.site.siteMetadata.rssMetadata;
              return ctx.query.allMarkdownRemark.edges.map(edge => ({
                categories: edge.node.frontmatter.tags,
                date: edge.node.frontmatter.date,
                title: edge.node.frontmatter.title,
                description: edge.node.excerpt,
                author: rssMetadata.author,
                url: rssMetadata.site_url + edge.node.fields.slug,
                guid: rssMetadata.site_url + edge.node.fields.slug,
                custom_elements: [{ 'content:encoded': edge.node.html }]
              }));
            },
            query: `
            {
              allMarkdownRemark(
                limit: 1000,
                sort: { order: DESC, fields: [frontmatter___date] },
              ) {
                edges {
                  node {
                    excerpt
                    html
                    timeToRead
                    fields { slug }
                    frontmatter {
                      title
                      cover
                      date
                      category
                      tags
                    }
                  }
                }
              }
            }
          `,
            output: config.siteRss
          }
        ]
      }
    }
  ]