-
Notifications
You must be signed in to change notification settings - Fork 188
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styles flicker in. #147
Comments
Hello there @abhiaiyer91! Can you give me a little bit more information about the environment you're seeing the flicker in? What browser you're testing in, are you using React/some other framework, etc? We don't see flicker on the Khan Academy site. |
Hey there @xymostech! I'm seeing this during development/production in Google Chrome. I'm using React and MeteorJS. I'm wondering whats going on!! |
Let me see if I can get a video! |
@xymostech heres a video! |
We have yet to be able to reproduce this in code --if there's any way you can find a minimal reproducible case and put it up somewhere that we can run, it would be incredibly helpful in diagnosing this issue. This has been reported a few times now, but nobody's been able to produce code that consistently gives this behavior in any environment. If you can give an example of this happening, I'd love to figure out the root cause and fix it. |
We have seen something similar at Spring. I think one of my coworkers was looking into it. I'll see if he got anywhere with his investigation. |
@zgotsch @abhiaiyer91 do you guys use aphrodite for fonts by chance? Here's what I found:
Then again, I could be doing something wrong, too 😄 The solution is there in #83 (which compliments #95 quite nicely). |
Hey @mattkrick thanks for the info! Super interesting. We are def using font family via aphrodite. Gonna look into this a bit more. |
@mattkrick this is indeed my issue. |
@abhiaiyer91 I'm working on a PR right now to fix this, although it's closer to a rewrite & has breaking changes, so I'm not sure it'll get merged. Here's the approach:
|
Glad we've perhaps narrowed down the issue! A minimal reproducible test case would still be much appreciated, because then @xymostech and I can perhaps take a look too |
@jlfwong here's the easiest way to see it:
code sauce: https://github.com/parabolinc/action Minimal proof that the problem is what I say it is:
|
@mattkrick This doesn't work on the server side. The reason we prefix for all browsers is so we can server-side render styles without knowing what prefixes the client need. EDIT: Just kidding I didn't read your comment. Carry on! |
Yesss, thank you @mattkrick! Glad to have a reproducible test case. It seems like this shouldn't be too hard to get to a much smaller test case, but knowing that this problem seems to be font-specific is super helpful. Based on the descriptions here, I think we can probably fix this with a less heavy handed approach: we should just put |
@mattkrick So after doing some refactoring, my problem still exists but its not as bad as it was. I removed aphrodite refs in regards to font family, and the flicker is not as bad as it was. The answer is indeed in your plan above. |
@abhiaiyer91 true true, while fonts are by far the most expensive thing to re-evaluate, reparsing and re-evaluating the style tag for every new style isn't a sustainable path for a large app. I like @jlfwong's idea of 2 style tags, but once the primary style tag grows large enough, we're back where we started. IE10+ support ~4000 style tags IIRC, but keeping em all in 1 sounds a little cleaner IMO. |
Just confirmed that our flicking issue is also due to loading in a @mattkrick Much thanks for figuring this out! |
@chendo a fix is coming soon! If you can, please go ahead & add this to your dependencies in package.json: |
@mattkrick Tried to do that but running into the following:
We need to ship super soon so we'll probably go with pulling out the font-face stuff into a separate stylesheet for now. |
@chendo ahhh yeah, you'll wanna build it after install. (cd node_modules/aphrodite && npm run build:main) |
@mattkrick Ahhh, I'll try that when I have the time next. I just tested the refactored setup on an iPhone 5S and I'm still getting a slight flicker even without |
There's something similar happening in case of transition CSS rule:
Lets say all my buttons have transition because I want to slowly change styling whether it's hovered, active, disabled or normal. The thing is that Aphrodite doesn't style button immediately, but instead it has transition. This is not seen on initial load of a page which is good, but it does happen when I go to another route in SPA application using react-router. When I switch to another route my buttons all have transition only for that first time. If I move from the page and get back they don't get transitioned again, but that is because it's styles are already included in Aphrodite style tag from the previous time I was on that page. This is unwanted behavior. So if there is a way to force Aphrodite to calculate all possible styles in my application (I'm using webpack/babel) and insert all styles at once on my initial load I'm guessing that would clear this problem. I haven't yet tried animations but I have a feeling similar thing will happen. |
I'm also getting some flickering with client-side routing + meteor and aphrodite. I have my fonts declared in a css file and use them in my js via fontFamily. |
Just to add, I'm seeing flickering/flashes of unstyled content in Safari 9 - only with some styles, not all of them, but it's pretty noticeable. Not seen it in any other browsers but as Safari 9 is reasonably important for the site, I may have to rip out Aphrodite and replace with something else :( |
There's just one thing that I can't figure out and it's driving me crazy: Using the theme with the self-hosted assets, a re-fetch is performed on the first update and the application flickers, I really can't understand why they behave so differently. Here's my font faces configuration:
|
Hey there,
Loving aphrodite so far. I keep noticing that when my components render on the screen there is a small flicker. The component is first unstyled then styled. I am not using SSR.
Is there a way to preload css functions? Or am I just doing something wrong?
The text was updated successfully, but these errors were encountered: