search

fregante / webext-base-css

Extremely minimal stylesheet/setup for Web Extensions’ options pages (also dark mode)
https://npm.im/webext-base-css
MIT License
86 stars 1 forks source link

Misaligned labels on checkboxes in Firefox #16

Closed frederikb closed 1 month ago

frederikb commented 7 months ago

Hi,

first of all thanks for this stylesheet (and webext-options-sync): I'm happily using both in frederikb/bookmarksync.

Problem Description

I've noticed the following visual discrepancy between Chrome and Firefox in regard to checkboxes, which is probably (?) not intended. The label is vertically misaligned with its checkbox in Firefox.

Chrome (Version 123.0.6312.105 (Official Build) (arm64))

image

options.html from this repo: image

Firefox (124.0.2 (64-bit))

image

options.html from this repo: image

Workaround

The issue disappears when I remove the following Firefox only style from webext-base.css:

input[type="checkbox"] {
  vertical-align: -0.4em;
}

That line dates back from four years ago according to git blame. There might have been some browser style changes since then? Can you confirm that this is a regression from since then?

fregante commented 7 months ago

Do you use Refined GitHub? If the browser changed styles, you should see the same issue there.

If not, there might be a specific DOM style you have to follow for that to work. There's a demo extension in this repo for reference https://github.com/fregante/webext-base-css/blob/main/options.html

frederikb commented 7 months ago

I've installed Refined GitHub and see the same issue there in Firefox (FYI, I'm on macOS 14.2.1, I forgot to mention):

image

The checkboxes and labels for the features details section look fine, but then again the markup for that is quite different as well.