search

tiborsaas / unique-gradient-generator

Generate background gradients from a few pixels
http://tiborsaas.github.io/unique-gradient-generator/
MIT License
296 stars 22 forks source link

FireFox on OS X pixelization #4

Open sergiks opened 8 years ago

sergiks commented 8 years ago

This is not quite an issue, just a note that various browsers display different results with the proposed technique.

FireFox 43 under OS X displays significant pixelization for scaled up images. Here's how the front page looks in FF / Mac OS X: screenshot

A little further research shown differences of interpolation algorithms utilized by various browsers. Sample 9x5px image (white bg, 9 black pixels)
9x5 sample
was scaled up to 900x500 in several browsers / operating systems.

Chrome 47, Mac OS X (best-looking one)

Chrome / OS X

Firefox 43.0.4, Mac OS X

Firefox / OS X

Firefox 43.0.4, Windows 8

Firefox / Windows

tiborsaas commented 8 years ago

Should it be reported to FF as a bug/feature request? At least it should respect the image-rendering CSS property, as it's a standard. https://drafts.csswg.org/css-images-3/#the-image-rendering

sergiks commented 8 years ago

I don't see a connection to image-rendering. The property only suggests three values: auto | crisp-edges | pixelated, none of which specifies which interpolation algorithm specifically to use for scaled-up image blur. They only mention "bilinear interpolation" (FF/Win above implements it if I'm not wrong) as an example.

tiborsaas commented 8 years ago

It does specify algos: in my understanding only pixelated options should be pixeled :) Auto should use bilinear which is quite specific. Anyways, FF now handles this thing inconsistently across platforms, I'll file a bug report to them.