CODEWITHSUNDEEP
cssbuttontransform
Manfred Wisniewski
Manfred Wisniewski

Reputation: 151

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

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.

crisp text in firefox blurry text in chrome]

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!

Upvotes: 3

Views: 2151

Answers (1)

Shomz
Shomz

Reputation: 37701

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.

Upvotes: 2

Related Questions