Фоновый цвет изображения иногда отображается за пределами контейнера

Question

Я хочу отобразить некоторые фигуры с динамически настроенными цветами. С этой целью я подготовил все формы как изображения с прозрачностью в областях внутри формы и белого цвета снаружи. Чтобы изменить цвет фигуры, я просто устанавливаю свойство background-color элемента img.

Проблема в том, что иногда я вижу линии с 1 пикселем на краях изображения. Такая строка в верхней части изображения видна в Google Chrome для Android, а в версии для ПК эта проблема видна после увеличения страницы. Проблема не возникает в Firefox. Вот sample code in JSFiddle (обновлено).

Более того, проблема не возникает, если я удаляю внешний элемент div или его стиль (я добавил его, потому что хочу, чтобы страница была центрирована как по горизонтали, так и по вертикали).

Я ищу любое решение: либо взломать, чтобы исправить мой код, либо другой способ достичь моей цели покраски фигур динамически.

Answer 1

Наконец, мне удалось найти рабочее решение:

backface-visibility: hidden; 
-webkit-backface-visibility: hidden; 

Это должен быть добавлен в стиле основного контейнера, который имеет transform свойство применяется. overflow: hidden; не требуется.

См. Это JSFiddle.

Answer 2

Это похоже на сбой в графическом ускорителе. Если вам не нужно свойство transform в CSS, его удаление должно решить проблему для вас (по крайней мере, для меня в Chrome на OS X). В этом случае, вы могли бы (например) использовать отрицательные поля вместо

<div style="position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -27px"> 
    <img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: #000000;"/> 
</div> 

http://jsfiddle.net/Lyd6xs5u/2/

Answer 3

Что я могу видеть в своем коде, что линия перелива снаружи. Вы можете просто добавить overflow:hidden в элемент div. посмотреть fiddle

<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);overflow:hidden;"> 
 
    <img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: red;" /> 
 
</div>