Вопрос:
Проверьте этот 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);