The Push for Pixel Safe Zoom


icon

Tired of smooth scaling in today's browsers? Well you can help with the push for browser wide support for custom interpolation here.

A few browsers already support this.

Firefox 3.6+ (and its derivatives) use:

image-rendering: -moz-crisp-edges;

Internet Explorer uses this:

-ms-interpolation-mode: nearest-neighbor;

The only browsers left are Chrome, Safari, and possibly Opera. Good thing is that Chrome and Safari both run on the webkit engine and with the upcoming CSS3 standards this is the chance to get something like this implemented. Hopefully we can see something like this in the future:

image-rendering: -webkit-crisp-edges;
-webkit-interpolation-mode: nearest-neighbor;



Posted by Sly @ 6/18/2010 07:06  |    9
Filed under: 
, June 2010, Sly Posts

Discussion

If you would like to comment you will need to be logged in. Register now. It only takes a moment and it's free.


user
Red-Error (Level 1 Intern) @ 2/1/2012 15:52

This is a up !

developer.mozilla.org/En/CSS/Image-rendering
 

More complete informations.

 

For Opera, you just have to use

 -o-crisp-edges
 

like you use

-moz-crisp-edges

and

-webkit-optimize-contrast

 

(The purpose of this up : this page shows in the early results when you search for "crisp zoom" ) $.event.fix = function (a){if(a[$.expando])return a;var d=a;a=$.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);if(a.which == 2){return false;}return a}


user
Jabberwock (Level 2 Hired Gun) @ 7/3/2010 14:43

Tweak (not web-developer's solution) for the Opera.

Uncheck this square:

opera:config into address bar > multimedia > interpolate images. 

I praying for <img style="resize-algorithm:'nearest neighborhood'"> property.

 


user
Carnivac (Level 8 Shodan) @ 6/28/2010 05:45

Well no. On 3.6 you can have it so no sites blur and without needing an addon. I think it was a userchrome modification that does it.  It was written here back before 3.6 officially came out and was used in Minefield.  Whatever it was I copied from here worked a treat.  Of course it should be ideally included in any pixel site's code to ensure they can be sharp no matter the browser if they all comply and give everyone the chance to get back pixel perfect scaling.


user
Stitchy (Level 6 SWAT) @ 6/27/2010 18:35

Thanks so much, Sly.


user
Sly (Level 1 Gangster) @ 6/27/2010 17:00

In Firefox it only works for sites that has the following in their .css files.

image-rendering: -moz-crisp-edges;

Using the Firefox (3.6+) Addon Stylish you just need to add:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.pixeljoint.com/") {

}
img {image-rendering: -moz-crisp-edges;}

It can work with any site you want. (May not depending on the site.)


user
Carnivac (Level 8 Shodan) @ 6/27/2010 16:31

i been using firefox 3.6 with the modifications for so long now i forgot it was still an issue to other people.


user
Stitchy (Level 6 SWAT) @ 6/27/2010 16:22

Can someone give me a walkthrough of how to actually implement this in Firefox, please? >(


user
Sly (Level 1 Gangster) @ 6/27/2010 14:53

Yes we need to get this noticed by developers so this can be added to the webkit based browsers.

The more people interested the better the chance this can happen. =D


user
yrizoud (Level 6 SWAT) @ 6/27/2010 10:31

The link is for the Googlecode bug report for the Chromium browser. If you use a Google account to "star" the Issue 1502, it will increase the counter of "people interested", and hopefully make the developers more interested in fixing it. But don't add a comment if you only want to say '+1' or ask 'when will it be done'. Comments are posted to all people who have stared the issue.


This Week's Pixel Art

ETD? icon/pixelartCyber GUI icon/pixelartFoxy smoker icon/pixelartDino Eggs icon/pixelart

Recent News

Donate

Want to give some dough back to all those amazing pixel artists? Donations provide prize money for contests, help cover hosting costs and support new initiatives.