Контрастная перегрузка с использованием фильтра полутонов CSS3 в Safari 6

Question

Использование CSS3 фильтра оттенков серого для изображений портфолио. Отлично смотрится в Chrome, Firefox, Safari 7 и iOS.

Image-Chrome 30: http://pikku.co/test/chrome-hover.png

Image-Firefox 24: http://pikku.co/test/firefox-hover.png

Контрастная перегрузка в Safari 6. Серый цвет полностью выдувается, а черный перенасыщен.

Image-Safari 6: http://pikku.co/test/safari-hover.png

Код:

img.grayscale {
    /* Firefox 10+ */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* IE6-9 */
    filter: gray;
    /* Chrome 19+ & Safari 6+ */
    -webkit-filter: grayscale(100%);
    /* Fade to color for Chrome and Safari */
    -webkit-transition: all .6s ease;
    /* Fix for transition flickering */
    -webkit-backface-visibility: hidden;
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Добавление контрастного фильтра, -webkit-filter: contrast(.5), отменяет эффект оттенков серого. Любые идеи о том, как контролировать контраст в Safari 6?

Демо-сайт: http://flowmedia.dk/new/

Answer 1

Просто объедините фильтры:

-webkit-filter: grayscale(100%) contrast(.5);