www.khanacademy.org - see bug description

[webcompat-bot]

URL: https://www.khanacademy.org/computer-programming/radiofor-the-contest/4946533921406976

Browser / Version: Firefox 76.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: The drawings on the canvas element are pixelated on firefox Steps to Reproduce: On the canvas element's CSS (id: output-canvas) image-rendering is crisp-edges whereas on chromium based browsers it's -webkit-optimize-contrast. This causes the drawings on the canvas-element to be pixelated on Firefox and smooth on Chrome.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I'm not seeing any differences between Firefox and Chrome.

Tested with: Browser / Version: Firefox Nightly 78.0a1 (2020-05-24) Operating System: Windows 10 Pro

@karlcow can you see any differences on your side?

[karlcow]

latest chrome canary, firefox nightly. There's a difference.

[karlcow]

<canvas id="output-canvas" tabindex="0" width="600" height="600" 
   style="image-rendering: crisp-edges !important;"></canvas>

This is intended.

style="image-rendering: crisp-edges !important;"

and done here.

          ln.prototype.smooth = Kr;
          on.prototype.noSmooth = function () {
            f = false;
            var e = l.style;
            e.setProperty('image-rendering', 'optimizeSpeed', 'important');
            e.setProperty('image-rendering', '-moz-crisp-edges', 'important');
            e.setProperty('image-rendering', '-webkit-optimize-contrast', 'important');
            e.setProperty('image-rendering', 'optimize-contrast', 'important');
            e.setProperty('-ms-interpolation-mode', 'nearest-neighbor', 'important');
            if (v.hasOwnProperty('mozImageSmoothingEnabled')) {
              v.mozImageSmoothingEnabled = false
            }

[karlcow]

and more the smoothing has been canceled only for Firefox. https://cdn.kastatic.org/genwebpack/prod/en/javascript/scratchpads-package/exec-pjs-entry.b0c6ab23fdcb8c76e8f2.js

I'm not sure on chrome

<canvas id="output-canvas" tabindex="0" width="600" height="600" 
   style="image-rendering: -webkit-optimize-contrast !important;"></canvas>

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Ah interesting.

v.mozImageSmoothingEnabled

returns true, before the the if. but v.hasOwnProperty('mozImageSmoothingEnabled') returns false 👀

but this is working on the console.

 v.mozImageSmoothingEnabled = false
false
v.mozImageSmoothingEnabled
false

ah https://bugzilla.mozilla.org/show_bug.cgi?id=1228850 They should just test imageSmoothingEnabled instead.

Ah and interesting too. Chrome has a imageSmoothingEnabled set to false. ok.

Let's contact them.

[karlcow]

Ah no that would not work because

v.hasOwnProperty('ImageSmoothingEnabled')… is returning false.

huh. https://bugzilla.mozilla.org/show_bug.cgi?id=768072 This is supposed to be implemented.

ah chrome does the same thing

 v.hasOwnProperty('ImageSmoothingEnabled')
10:41:39.360 false
10:42:08.263 v.hasOwnProperty('mozImageSmoothingEnabled')
10:42:08.297 false
10:43:12.181 v.imageSmoothingEnabled
10:43:12.218 true
10:43:17.781 v.mozImageSmoothingEnabled
10:43:17.809 true

so the fix is:

if (v.ImageSmoothingEnabled) {
              v.ImageSmoothingEnabled = false
            }

And same for the smooth case a couple of lines above.