Menu
I'm using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done.
Fiddle: http://jsfiddle.net/russelluresti/UeNFK/
I also noticed that this does not occur on my headers, which have the -webkit-font-smoothing: antialiased property/value pair on them. So, I'm wondering, is there any way to have the text maintain its default look (the "auto" value for font-smoothing) and not alter rendering during a transition.
I've tried explicitly setting the text to use the "auto" value, but that doesn't do anything. I should also note that setting font-smoothing to "none" also prevents the rendering blink during transition.
Any help is appreciated.
Edit 1
I should note that I am on OS X. While looking at my test in Chrome on Parallels, I did not see the two different paragraphs behaving differently, so this may be an issue exclusive to Macs.
644
Fortunately, several options are available to fix that : -webkit-backface-visibility: hidden; This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element. But use it wisely : this rule works, but is not the most efficient way to avoid flickering effect.
Use the @supports (transition) feature query instead. The -webkit-transition Boolean non-standardCSS media feature is a WebKit extension whose value is true if the browsing context supports CSS transitions. Apple has a description in Safari CSS Reference; this is now called transition there.
If you're design is placing text onto a dark background then you have a good reason to look towards using the WebKit and Firefox prefixed font-smoothing options to make the text look lighter, but you should be warned that these only work on Mac and OSX and leaves the billions of other users with a sub-standard view.
antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. subpixel-antialiased - On most non-retina displays, this will give the sharpest text.
I think I found A solution:
-webkit-transform: translateZ(0px); Forcing hardware acceleration on the parent element seems to solve the problem...
EDIT As commented, this hack disables font-smoothing and can degrade text rendering depending on your fonts, browser and OS!
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
