Adding Webkit-optimize-contrast to Hype, for Google Chrome

1. What do you want to see in Hype?

So, there's still this issue in Google Chrome that makes downscaled images look very blurry (on non retina screens).
In the past I've unchecked the WebKit graphics acceleration to fix this, however this doesn't seem to fix it anymore. And working in the ad industry I regularly create one master variant and adjust it to multiple sizes, hence grouping images and scaling it is a day to day practice for me.

Online I found a quick fix for this, to add image-rendering: -webkit-optimize-contrast !important; to the css. This seems to fix the issue on Google Chrome, however it makes the image too crisp on other browsers such as Safari, so enabling this just for Chrome seems the be the workaround.
Ofcourse, I could add this manually in every project, however I though it would be nice if this could be toggle function under the Advanced Options.

3. Have you found a workaround for this problem?
Adding image-rendering: -webkit-optimize-contrast !important; in the css just for Google Chrome.

2. Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)

4. How high of a priority is this for you?

[X] Nice to Have
[ ] Important
[ ] Can't use Hype without it

1 Like

Maybe this helps in the meantime (untested):

/*
    Based on 
    https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
    https://developer.mozilla.org/de/docs/Web/CSS/image-rendering
*/
if (!window._installedImageFixCSS) {

    function installFixCSS(){
        var s = document.createElement("style");
        s.setAttribute("type", "text/css");
        s.appendChild(document.createTextNode('img{image-rendering:-webkit-optimize-contrast;}'));
        document.getElementsByTagName("head")[0].appendChild(s);
    }

    window._installedImageFixCSS = true;
    var isChromium = window.chrome;
    var winNav = window.navigator;
    var vendorName = winNav.vendor;
    var isOpera = typeof window.opr !== "undefined";
    var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
    var isIOSChrome = winNav.userAgent.match("CriOS");

    if (isIOSChrome) {
        // is Google Chrome on IOS
        installFixCSS();
    } else if (
        isChromium !== null &&
        typeof isChromium !== "undefined" &&
        vendorName === "Google Inc." &&
        isOpera === false &&
        isIEedge === false
    ) {
        // is Google Chrome
        installFixCSS();
    }
}

Minified:

if(!window._installedImageFixCSS){var installFixCSS=function(){var a=document.createElement("style");a.setAttribute("type","text/css");a.appendChild(document.createTextNode("img{image-rendering:-webkit-optimize-contrast;}"));document.getElementsByTagName("head")[0].appendChild(a)};window._installedImageFixCSS=!0;var isChromium=window.chrome,winNav=window.navigator,vendorName=winNav.vendor,isOpera="undefined"!==typeof window.opr,isIEedge=-1<winNav.userAgent.indexOf("Edg"),isIOSChrome=winNav.userAgent.match("CriOS");
isIOSChrome?installFixCSS():null!==isChromium&&"undefined"!==typeof isChromium&&"Google Inc."===vendorName&&!1===isOpera&&!1===isIEedge&&installFixCSS()};

installImageFixCSS.hype.zip (14,3 KB)

2 Likes

Thanks for the feedback. For some reason I'm having trouble seeing this, and any image-rendering settings aren't seeming to change stuff... do you happen to have a document demonstrating this? Thanks!

1 Like

Amazing as always @MaxZieb !, I'll try it first thing tomorrow!
*Edit: I've checked it, and I had to change it from img to body, and it works great :ok_hand:
s.appendChild(document.createTextNode('body{image-rendering:-webkit-optimize-contrast !important;}'));

@jonathan Yes, I've got 3 exports on a preview page demonstrating the differences (on a non retina display) On a Mac display they're all sharp, however on a Dell or any other non-retina display they're blurry.

Preview (Webkit graphics acceleration on)
Preview ((Webkit graphics acceleration off)
Both are blurry for me (on my extra dell monitor)

And here the Preview (with the webkit contrast css as stated in stackoverflow), this one is sharp for me on my non-retina screens on Google chrome (however, overly contrasted on safari).

(The blurry artifacts happen on the smaller sized banners, as the master is created on the 300x600, any size around those images should be sharp, but the smaller sizes are blurry. *note that the copy and graphics are all svg's, however the images surrounding the character are all png's, which get blurry)

Tumult

1 Like

Thanks, it is pretty clear to reproduce with that image.

I need to do a bit more testing on webkit-optimize-contrast and if it is universally the right solution for this, but it is the type of workaround that we'd want to apply.

1 Like