Изображение размыто при масштабировании в мобильном сафари ⇐ CSS

[Anonymous]

Я внедряю щепотку, чтобы увеличить жест в JS/CSS. Для этого я помещаю довольно большой источник изображения в метку небольшого размера , а затем применяю преобразование шкалы CSS, чтобы сделать его больше.
Вещи работают нормально, однако на мобильном сафари изображение становится размытым, как только я начинаю масштабироваться. Это не должно быть так, так как SRC для изображения достаточно велик, чтобы поддержать этот размер, но каким -то образом мобильный сафари отображается как размытый. < /p>

Я довольно много отлаживал проблему и обнаружил, что виновник является несвязанным Div на моей странице, которая настраивает Translate3d (0,0,0) < /code>. Насколько я понимаю, это взлом для запуска аппаратного ускорения GPU. Я полагаю, что это происходит, так это то, что из -за Translate3d (0,0,0) применяется аппаратное ускорение при рендеринге

< /code>

css < /p>

#translate3d-div {
/* If I remove this, the image is not blurry */
transform: translate3d(0,0,0)
}

#image {
width: 95px;
height:76px;
transform: scale(20);
}
< /code>

Это отображает размытие изображения на мобильном сафари, но он отлично работает на Chrome в Android. Я не думаю, что смогу это сделать, так как это может быть использовано какой -то другой функцией на веб -странице.>

Подробнее здесь: https://stackoverflow.com/questions/579 ... ile-safari