1

In chrome my text appears blurry, I've tracked the issue down to my animation in my css file but I have no idea why it is causing this.

(make sure you open the image otherwise you don't see a lot of difference)

Enabled animation (blurry) enter image description here

Disabling the animation (crisp) enter image description here

I have tried a lot of options that I found on stack overflow but none solve my issue...

Animation itself

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

animation: blink 2s infinite;

Example of animation enter image description here

NealVDV
  • 2,302
  • 3
  • 26
  • 51
  • What animation styles are you using? Can you share them? – Terry Aug 14 '17 at 17:53
  • I'm pretty sure that's just how chrome is. Animations and transitions are blurry. – yaakov Aug 14 '17 at 17:53
  • @Terry See updated question – NealVDV Aug 14 '17 at 17:57
  • @TricksfortheWeb See updated question – NealVDV Aug 14 '17 at 17:57
  • I saw it, my comment still applies. – yaakov Aug 14 '17 at 17:58
  • But it blurs all other text, the blurred text has nothing to do with the animation... The animation is on the arrows not on the title or the other text :( – NealVDV Aug 14 '17 at 17:58
  • 2
    Can you post either your full code, or at least a [fiddle](https://jsfiddle.net)? – yaakov Aug 14 '17 at 17:59
  • @TricksfortheWeb I am unable to recreate this in a jsfiddle -_- (https://jsfiddle.net/jao3kpef/) – NealVDV Aug 14 '17 at 18:06
  • @TricksfortheWeb it seems to be an issue with my resolution in chrome? If I make the window smaller it works out fine but on full screen size it seems blurry. My screen size is `2560 x 1440` – NealVDV Aug 14 '17 at 18:13
  • 1
    If you can't reproduce your issue, how can you expect us to help you with troubleshooting? – Terry Aug 14 '17 at 18:25
  • @Terry I really have no idea... How can I recreate a problem existing in a fairly large project that only occurs when I have chrome at full size when my animation is activated? – NealVDV Aug 14 '17 at 18:31
  • Use the 50/50 rule. Take half of the code out. Does it go away? If yes: the issue probably lies in the half that was taken out. No? The issue lies in the half that remain. Rinse and repeat. Asking a question here means that you invest in some effort in creating a **minimal, concrete and verifiable** example. – Terry Aug 14 '17 at 18:36

1 Answers1

2

i've solved the issue and it was because my wrapper component had position: relative; which somehow caused the rest to be blurry when the transform was applied.

Look for a parent that has the position:relative;

NealVDV
  • 2,302
  • 3
  • 26
  • 51