Блог

Главная - Вопросы по программированию - -webkit-transform: создание неровных линий в Chrome

-webkit-transform: создание неровных линий в Chrome

#html #css #google-chrome #webkit

#HTML #css #google-chrome #webkit

Вопрос:

Используя следующий код, я размещаю объекты под углом по обе стороны от веб-страницы. Один из них немного наклоняет div влево, а другой вправо.

Слева:

 -webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg) ;

Справа:

 -webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);

Скриншоты проблемы:

100% масштабирование

Как вы можете видеть, в Chrome края стали очень неровными при обычном уровне масштабирования.

Увеличение на 300%

При 300% линии становятся намного четче….почему это так?

Увеличение на 500%

При 500%, хотя я не могу прокручивать изображение очень далеко, я могу заметить гораздо большую разницу, чем при 100% масштабировании, и я не уверен, почему. Можно было бы подумать, что верно обратное, учитывая, что при увеличении я предположительно «раздуваю его»…Возможно, я слишком много предполагаю здесь. Итак, я спрашиваю сообщество, почему мои строки становятся неровными после -webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg) ;

Я пробовал некоторые вещи, в том числе добавление этого:

 -webkit-backface-visibility: hidden;

или это:

  /* Due to a bug in the anti-liasing*/
 -webkit-transform-style: preserve-3d; 
 -webkit-transform: rotateZ(2deg);

безуспешно…

При необходимости я могу предоставить ссылку на код, с которым я работаю, однако я чувствую, что предоставленная мной строка кода может быть самой причиной.

Спасибо,

Джеймс

Редактировать: я чувствовал, что изображение div без применения к нему webkit-transform было необходимо.

Вот оно

Комментарии:

1. Это просто натяжка (каламбур, определенно задуманный) Я думаю, что я сжимал свое изображение с помощью преобразования. Для контейнера div было установлено 420px значение, и я уменьшал его, translateZ(-200px) настраивая translateZ на -100px, что сделало его лучше, хотя и больше. Я думаю, что мне нужно соответствующим образом настроить размеры моего div. Я отмечу это как ответ, если он окажется, но не стесняйтесь вносить свой вклад.

2. БИНГО! Я создал свое изображение на 50% меньше, чем 420px X 60px div, который он собирался заполнить (210px x 30px), и применил background-size: 100% его, чтобы увеличить изображение, и теперь оно хорошо выглядит при 100% увеличении. Просто нужно настроить некоторые оттенки, и мы золотые. Я оставлю это здесь для любых будущих пользователей Google с неровными изображениями webkit-transform .

Ответ №1:

Я создал свое изображение на 50% меньше, чем 420px X 60px div, который он собирался заполнить (210px x 30px), и применил background-size: 100%, чтобы увеличить изображение, и теперь оно хорошо выглядит при 100% увеличении. Просто нужно настроить некоторые оттенки, и мы золотые. Я оставлю это здесь для любых будущих пользователей Google с неровными изображениями webkit-transform.