Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]

I want to center my div and I use this method, but it makes my texts inside the div blurry:

<!-- language: lang-css -->  #div {   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   transform: translate(-50%, -50%); } 

is there any way to center my div?

like image 473
Ken Avila Avatar asked Jun 29 '15 06:06

Ken Avila


People also ask

How to blur text in CSS?

This text is blurred. Styling text in CSS is pretty easy and so is making it blurred. In this article, we are going to show you two easy methods that you can use to blur the text using CSS. The first method of creating a blurred text is to make the text transparent and then apply a blur effect using the text-shadow property.

How to fix WebKit CSS transforms with subpixel fonts?

Webkit for whatever reason likes to make the fonts swap from subpixel to standard antialiasing when doing css transforms. Personally, I’ve found the best way to fix this is to force standard antialiasing on the element which is being transformed.

Why is Wufoo’s font smoothing so bad?

Basically, certain JavaScripts seem to cause crazy font smoothing stuff to happen. On Wufoo’s site, they’ve got an image slider/fader at the top of the page, but every time it changes to a new slide, ALL of the text on the page temporarily changes to antialiased font-smoothing.


1 Answers

Add these styles around elements blocks which you are translating to fix the anti-aliasing, Translate Z-axis to have a zero value.

-webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translateZ(0) scale(1.0, 1.0); 
like image 190
4dgaurav Avatar answered Sep 20 '22 04:09

4dgaurav