title: Fonts under a container div is appearing blurry for couple of seconds in chromium based browsers?
body: <p>One of my webpages is showing blurry text (roboto font) for a second when page loads. The text shifts little bit. You should see this on chromium based browsers like chrome, brave, vivaldi. The page link is <a href="https://elomymelo.com/soundcore%20motion%20plus%20review.html" rel="nofollow noreferrer">https://elomymelo.com/soundcore%20motion%20plus%20review.html</a>
  So when some elements start appearing, from then the first second is okay. The the second second is blurry text and then after third it's fine again. The thing is I have some div that has dynamically applied scaling after 1 second. But the same thing is done on other pages. But only the mentioned page is showing this problem, which is not the heaviest page at all.</p>
  <p>CSS</p>
  <pre><code>-webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translate3d(0,0,0) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-perspective: 1000;
  -webkit-filter: blur(radius);
  -webkit-filter: blur(0);
  </code></pre>
  <p>I tried some of these but no luck. I am not sure where to put these like on the main container where inner text is blurry or on those transformed divs inside the main container? Is there any possibility that some of those fixes need to be added on the main container and some of those on the transformed divs?</p>
  <p>I've seen a lot of chrome updates. That problem was there before Chrome 94, probably 96 the blurry problem was kinda fixed. But now in chrome 105 seeing it again. No blurry text in firefox and safari. But only that main article container div has the problem. Please anyone knows where to put those css fixes or any suggested solutions?</p>