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

Question

I am using a menu that is animated using a transformation of an < svg> element with buttons on top of it. Strangely the text on the buttons is extremely blurred in chrome, while it is nice and crisp in all other browsers I have tested so far.

The blurry text is not related to the < svg> element. (which was my first guess) If I remove it the text is still blurred. It seems to be related to the < button> element. Just displaying the text without it being in the < button> gives nice and crisp text in chrome.

This is the css currently assigned to the 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 is the transform that takes place on hover: (when the buttons with the 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 always chrome) to css transformation but I haven't been able to find any answer that could have been applied to my problem. Any ideas?

Thanks!

PS. Removing all transformation elements from the animation leads to crisp text - but then the entire menu does not work any more as intended. (Since I need to make the buttons zoom in or out.) — Manfred Wisniewski

Shomz Shomz · Accepted Answer · 2015-07-27T12:19:54

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

But there's not much more you can do about it because it's entirely done by a browser.

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

1 Answers