Размытый текст в модальном режиме при центрировании с помощью перевода (-50%,-50%); ⇐ CSS

[Anonymous]

Я вижу размытый текст (в Chrome) в модальном окне, центрированном с помощью преобразования: Translate(-50%,-50%);

Ширина модального окна не может быть явно указана в пикселях.

Вот текущий CSS для модального элемента div:

Код: Выделить всё

#emod
{
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
display: none;
background-color: #fff;
-ms-transform: translate(-50.1%,-50.2%); /* IE 9 */
-webkit-transform: translate(-50.1%,-50.2%); /* Safari */
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 20px 100px 100px 100px;
background-color:White;
overflow:auto;
*/
}

Я прочитал все существующие вопросы и предложения и попробовал все распространенные предложения по исправлению этой проблемы, каждое по отдельности и в некоторых комбинациях, в том числе:

Код: Выделить всё

-webkit-transform: translate(-50.1%,-50.1%)
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0); /*this one causes div to not be centered anymore, but works*/

Есть идеи, как я могу это преодолеть? Я читал об исправлении JavaScript, которое округляет десятичные пиксели до четных чисел, но не смог найти никаких подробностей о том, как его реализовать. Я бы предпочел решение css, но мне нравится обходной путь js...

Я также использую jQuery в этом проекте, поэтому решение jQuery тоже подойдет.

Я также использую jQuery в этом проекте. п>

Подробнее здесь: https://stackoverflow.com/questions/347 ... late-50-50