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 &lt; 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

Command icon 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

pivica created an issue. See original summary.

pivica’s picture

Status: Active » Needs review

MR created, testing this a bit before meging.

pivica’s picture

Status: Needs review » Fixed

Merged.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.