Blurry text in chrome on < button> element related to css transform? -


i using menu animated using transformation of < svg> element buttons on top of it. strangely text on buttons extremely blurred in chrome, while nice , crisp in other browsers have tested far.

crisp text in firefox blurry text in chrome]

the blurry text not related < svg> element. (which first guess) if remove text still blurred. seems related < button> element. displaying text without being in < button> gives nice , crisp text in chrome.

this css assigned button element:

.grid figure button { top: 50%; left: 50%; border: medium none; background: #316ba8 none repeat scroll 0% 0%; color: #fff; opacity: 0; transform: translatey(-50%) translatex(-50%) scale(0.25); 

this transform takes place on hover: (when buttons blurry text come up)

.grid div:hover figure button { opacity: 0.9; -webkit-transform: translatey(-50%) translatex(-50%) scale(1); transform: translatey(-50%) translatex(-50%) scale(1); } 

i have found other posts relating blurry text in browsers (not chrome) css transformation haven't been able find answer have been applied problem. ideas?

thanks!

it's scaling (maybe because it's combined opacity 0.9) - try finding sweet spot if can or try checking if works better with/without hardware acceleration.

but there's not more can because it's entirely done browser.


Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -