Кажется, что поворот оттенка -webkit-filter не дает правильных результатов в Chrome ⇐ CSS

[Anonymous]

Если я поверну оттенок на 90 градусов, используя что-то вроде:

Код: Выделить всё

.foo {
-webkit-filter: hue-rotate(90deg);
}

оттенок поворачивается, но выглядит неправильно. Например, если я выполню один и тот же сдвиг в Photoshop, я получу разные результаты. Я также заметил, что результаты в Chrome и Safari разные.
Похоже, что оттенок повернут всего примерно на 60 градусов, а насыщенность уменьшена.Есть ли способ заставить браузеры WebKit более надежно поворачивать оттенок, или я упускаю что-то важное в этом подходе к фильтрации?

Код: Выделить всё

.hue
{
-webkit-filter: hue-rotate(90deg);
}

div.sample {
width: 50px;
height: 50px;
margin-bottom: 10px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAADJGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkFGQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIwQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mjk1OTU4RUFBQTU2MTFFMkE1NEVENDU4MTVCNkE1QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTJEMzQ2QUVBQTU3MTFFMkE1NEVENDU4MTVCNkE1QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Lx9yCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUWMPtzgENAAAIAyCfyP7ptIZukIDUdN0TLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0trV+tBfHSOy90wM8FAAAAAElFTkSuQmCC');
}

div.photoshop
{
width: 50px;
height: 50px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MkQzNDZCM0FBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MkQzNDZCNEFBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkIxQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIyQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2s4ZagAAAEBJREFUeNrszjEBADAIA7Ayhfg3Awr2cyQKUunJPS8naWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaf2sAAMAdvMBs/7dIkQAAAAASUVORK5CYII=');
}

Код: Выделить всё

Original:


Hue Rotated by 90deg:

Photoshop Result Rotate Hue by 90deg:

Подробнее здесь: https://stackoverflow.com/questions/163 ... -in-chrome