649948 - Checkboxes and radios become very aliased when resized to a large size

Status: RESOLVED DUPLICATE of bug 1697053

(Core :: Layout: Form Controls, defect)

Description

[Lea Verou]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a1) Gecko/20110413 Firefox/6.0a1
Build Identifier: 6.0a1

Check the testcase in both Mac or Windows. The checkboxes & radio buttons are very badly scaled, showing enlarged pixels.

Reproducible: Always

Comment 1

[Boris Zbarsky [:bzbarsky]]

You don't even need a transform; just setting the size in CSS has the same behavior.

Comment 2

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: screenshot some checkboxes aliased

data:text/html,<input type="checkbox" checked="checked" style="width:100px; height:100px"/>
shows that the checkbox content is rendered like a 14x14 pixel graphic on Windows 8.1. Win XP and Xubuntu don't scale checkboxes.

The issue can also be observed for checkboxes at normal size (13x13), e.g. within the email preferences of Bugzilla: https://bugzilla.mozilla.org/userprefs.cgi?tab=email (see attached screenshot)

Comment 3

[Melanie Richards]

Can reproduce this in FF 51 by setting a height/width, as Boris mentioned: https://jsfiddle.net/1kdmrokc/3/

Comment 4

[Gingerbread Man]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
20200203214717

Confirming because a duplicate was filed and I couldn't find what this is supposedly a duplicate of.

Comment 6

[Chris Morgan]

Very good. I was surprised to not be able to find a report when I searched, given that I’ve known about this issue forever—it was just something coming up at work that caused me to finally search and file!

For Windows, EdgeHTML’s rendering is what Firefox should be using. IE and especially Chrome use a checkbox style that doesn’t match the native appearance. Screenshots of both Firefox and EdgeHTML’s renderings are on bug 1613008.

This is extremely close to a replica of what EdgeHTML has, at large sizes (accurate to within 1%, except that EdgeHTML uses subpixel rendering and this won’t in Firefox; also hover colour changes aren’t included):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="130" height="130">
    <rect width="26" height="26" stroke-width="2" stroke="#707070" fill="none" vector-effect="non-scaling-stroke" clip-path="inset(0)"/>
    <path d="m3.4,12.7,6.4,6.4,12.8-12.8" fill="none" stroke="black" stroke-width="1.5"/>
</svg>

… but when taking this down to 13×13, it draws the tick a bit closer to the edge of the box than Edge does, and I agree with Edge’s treatment. Dunno whether Edge effectively adjusts the path data at smaller sizes (which seems eminently reasonable to me, and can be done with media queries), or something else.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

So fwiw, Firefox doesn't show a pixelated checkbox on Linux. This basically depends on the underlying OS APIs...

But we're moving away from them at least on Windows (see bug 1381938). So that would probably fix this too.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

This doesn't happen on Nightly, and that should ride the trains to release as of bug 1697053.