Хром: SVG фоновое изображение на дисплее Retina

Вопрос: SVG загружается через <img> или <embed> правильно визуализации (т.е. высокого пиксель на единицу) на устройствах Retina, однако, когда тот же самый файл SVG загружен с помощью CSS background-image недвижимости он отображается плохо (похоже, что разрешение устройства не учитывается).Хром: SVG фоновое изображение на дисплее Retina

Есть ли вероятность, что я могу поговорить с моим браузером в правильной визуализации SVG на устройствах с более высокой плотностью пикселей? Уменьшение размера изображения с помощью background-size не сработало; Хаки вроде transform: translateZ(0) тоже не работали.

Обновление: Эта проблема, как представляется, относится к Chrome 39 и ранее.

источник

2014-11-30 incarnate

Конечно, это похоже на Chrome 39. Извините, но я не указал его раньше. – incarnate

Пожалуйста, напишите сообщение об ошибке в http://crbug.com с полным тестовым кодом. Вы тестировали, правильно ли это работает в более поздних версиях? –

Он выглядит корректно в Chrome Canary. – incarnate

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

С границей: 1px твердых # 555:

Border

Без границ:

No norder

Вот мой код тестирования:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 

    div { 
     background-image: url('search.svg'); 
     width: 38px; 
     height: 38px; 
     border: 1px solid #555; 
    } 

    </style> 
</head> 
<body> 

    <div></div> 

</body> 
</html>

Edit: Кроме того, если размер элемента больше ширины и высоты, указанных в файле svg, изображение будет неровным. Использование background-size: содержать; кажется, что это решение, если соотношение сторон одинаково.

Редактировать 2: Выключает фоновое повторение, также влияет на рендеринг. Установка его на «no-repeat» обычно делает его правильным.

источник

2014-12-12 08:06:06 drdator

Хром: SVG фоновое изображение на дисплее Retina

ответ

Смежные вопросы