Bug 302194 – Using 'zoom' on input elements which have been sized by 'rem' leads to a broken layout.

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

Created attachment 477336 [details]
Rendering in Safari

Using 'zoom' on input elements (or their pseudo elements :before and :after) which have been sized by 'rem' units leads to a broken layout. It seems that the height of the elements isn't calculated properly. This makes it nearly impossible to style such elements. The effect is even more pronounced, if 'appearance: none;' is used. The following example shows the problem (see attachments). This problem doesn't exist in Blink or Gecko.

CSS:

html {
    font-size: 10pt;
}
button {
    appearance: none;
    height: 2rem;
    font-size: 1rem;
    zoom: 200%;
}
input[type="checkbox"] {
    appearance: none;
    zoom: 1000%;
    &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
        border: 1px solid black;
        content: "";
    }
}

HTML:

<button>Button</button>
<br>
<input type="checkbox" id="cb"></input>
<label for="cb">Checkbox</label>

Created attachment 477337 [details]
Rendering in Firefox

Created attachment 477338 [details]
Rendering in Blink (Electron)

[Ahmad Saleem]

Created attachment 477339 [details]
WebKit ToT - Reference Screenshot

It is definitely broken on Safari 26.1 but seems to be fixed on WebKit ToT.

[Radar WebKit Bug Importer]

<rdar://problem/164766238>

[Karl Dubost]

Created attachment 477565 [details]
rendering in safari, firefox, chrome

I see the same rendering everywhere.

tested with 

Safari Technology Preview  233          21624.1.3
Firefox Nightly            147.0a1       14725.11.21
Google Chrome Canary       144.0.7553.0  7553.0

[Karl Dubost]

Created attachment 477566 [details]
testcase

[Karl Dubost]

It is definitely broken in Safari Version 26.2 (21623.1.14.11.7)
So this has been fixed in STP.

[Brent Fulgham]

It seems like this was fixed in Bug 300052.

[Taher]

*** This bug has been marked as a duplicate of bug 300052 ***