Problem/Motivation
In Firefox, floating labels are permanently rendered in their active (floated) position, even when the field is empty and unfocused.
The compiled CSS shipped in css/ contains rules like:
.form-item--floating-label textarea.form-control:not(:-moz-placeholder) ~ label {
padding-top: 0.25rem;
background-color: #fff;
}
Autoprefixer generates these from :placeholder-shown. The legacy :-moz-placeholder pseudo-class still parses in
current Firefox but never matches an element, so :not(:-moz-placeholder) matches everything and the "field has content" styling is
applied unconditionally. Other browsers discard the rule as invalid, so the bug is Firefox-only.
The prefix is emitted solely because KaiOS 2.5 is part of the browserslist defaults set — it is the last remaining
target that requires it.
Affected files: css/components/floating-labels.css, floating-labels-filled.css,
floating-labels-outlined.css, forms.css.
Proposed resolution
Exclude KaiOS 2.5 from the autoprefixer target list by adding overrideBrowserslist to the autoprefixer options in
gulp-options.yml, then rebuild the CSS.
autoprefixer:
flexbox: false
overrideBrowserslist:
- 'defaults'
- 'not kaios < 3'
This drops exactly one target: defaults resolves to 30 browsers including kaios 2.5 and kaios 3.0-3.1;
defaults, not kaios < 3 resolves to 29, retaining KaiOS 3.x. No supported browser loses a prefix it still needs.
The option belongs in gulp-options.yml rather than in .browserslistrc. Browserslist resolves its configuration relative
to the directory Gulp runs in, so a child theme reads its own .browserslistrc (or none at all) and never picks up the one in BS Base.
gulp-options.yml is deep-merged into child themes by gulpfile.js, and its autoprefixer key is passed
straight to the plugin — so fixing it here fixes every theme extending BS Base, instead of each sub-theme having to repeat the workaround.
Issue fork bs_base-3613497
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
pivica commentedMR created, testing this a bit before meging.
Comment #4
pivica commentedMerged.