Артефакты, когда css масштабируется в Chrome

Вопрос:Проверьте этот jsFiddle: http://jsfiddle.net/XXrSD/1/ Код также приведен ниже: HTML: head test CSS .outer { border: 10px solid brown; margin: 10px; transform: scale(0.6); -webkit-transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); } .head { height: 25px; background-color: brown; } Вы можете видеть, что Chrome оставляет артефакты (разрыв между

Вопрос:

Проверьте этот jsFiddle: http://jsfiddle.net/XXrSD/1/

Код также приведен ниже:

HTML:

<div class=»outer»> <div class=»head»>head</div> <div> test </div> </div>

CSS

.outer { border: 10px solid brown; margin: 10px; transform: scale(0.6); -webkit-transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); } .head { height: 25px; background-color: brown; }

Вы можете видеть, что Chrome оставляет артефакты (разрыв между внешней границей и #head div) при масштабировании до 0,6 (и 0,3). Но он выглядит хорошо в Firefox. Я предполагаю, что из-за того, что Chrome не способен обрабатывать нецелые пиксели. Есть ли что-то, что я могу сделать, чтобы исправить это?

Лучший ответ:

Это происходит из-за того, что сглаживание применяется к краям объекта при масштабировании.
Браузер неправильно вычисляет область, которую необходимо перерисовать. Части, оставленные позади, являются призраками участков объекта, которые не были включены в область, которая будет перерисована.

Добавление -webkit-backface-visibility: hidden;, когда масштабирование/преобразование объектов разрешит эти нечетные искажающие артефакты в Chrome.

Обновленный пример:
http://jsfiddle.net/robaldred/XXrSD/2/

Ответ №1

Один хороший способ, если

-webkit-backface-visibility: hidden;

не работает, чтобы обернуть ваш div в другой с помощью рамки (padding);

Оцените статью
Добавить комментарий