CSS attribute selector does not work in Chrome

user_19578783 0
Viewed 594

Since last week we have had issues with CSS on our website on the current version of Google Chrome. The page works as expected on Edge and Firefox.

The strange thing is that it only seems to happen on some machines or possibly instances of Chrome. It does not matter if the settings are reset and refresh or incognito mode does not resolve it.

It seems related to attribute selectors in CSS. The smallest reproducible example we have found is just weird. It contains a lot of unrelated styling and removing the (seemingly) unrelated styling makes the page work.

When it works, the text on the page below is red. When it doesn't work, the text is black.

Screenshot including style in devtools: (upper is Chrome, lower is Edge)

<!DOCTYPE html>
<html>
<head>
<style>
custom-element .custom-form-control.miss-value:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value + label[data-placeholder]:before {
}
custom-element .custom-form-control.has-value.has-data-placeholder:focus + label[data-placeholder],
custom-element .custom-form-control.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}
custom-element .custom-form-control.has-value + label[data-placeholder],
custom-element .custom-form-control.miss-value + label[data-placeholder] {
}
custom-element .custom-form-control.has-value + label[data-placeholder][data-alt]:before,
custom-element .custom-form-control.miss-value + label[data-placeholder][data-alt]:before {
  content: attr(data-alt);
}
custom-element .custom-form-control.has-value + label[data-placeholder]:before,
custom-element .custom-form-control.miss-value + label[data-placeholder]:before {
    color: red;
}
custom-element .custom-form-control.miss-value.has-data-placeholder + label[data-placeholder] {
}
custom-element .custom-form-control.has-value {
}
custom-element .custom-form-control.has-value:hover {
}
custom-element .custom-form-control.has-value label[data-placeholder] {
}
custom-element .custom-form-control:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.is-active + label[data-placeholder]:before,
custom-element .custom-form-control.has-value:focus:hover + label[data-placeholder]:before,
custom-element .custom-form-control.has-value:hover + label[data-placeholder]:before,
custom-element .custom-form-control[type='text'].has-value:hover + label[data-placeholder]:before,
custom-element .custom-form-control[type='text'].has-value:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.custom-bordered:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.custom-bordered:hover + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.miss-value:focus + label[data-placeholder]:before,
my-unrelated-element .custom-form-control.has-value + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.has-value.has-data-placeholder:focus + label[data-placeholder],
my-unrelated-element .custom-form-control.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value + label[data-placeholder],
my-unrelated-element .custom-form-control.miss-value + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value + label[data-placeholder]:before,
my-unrelated-element .custom-form-control.miss-value + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.miss-value.has-data-placeholder + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value label[data-placeholder] {
}

some-unrelated-element .custom-form-control:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.is-active + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value:focus:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control[type='text'].has-value:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control[type='text'].has-value:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.custom-bordered:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.custom-bordered:hover + label[data-placeholder]:before {
}

some-unrelated-element input.miss-value:focus + label[data-placeholder]:before,
some-unrelated-element input.has-value + label[data-placeholder]:before {
}

some-unrelated-element input.has-value.has-data-placeholder:focus + label[data-placeholder],
some-unrelated-element input.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}

some-unrelated-element input.has-value + label[data-placeholder],
some-unrelated-element input.miss-value + label[data-placeholder] {
}
unrelated-element input:focus + label[data-placeholder]:before,
unrelated-element input.has-value.is-active + label[data-placeholder]:before,
unrelated-element input.has-value:focus:hover + label[data-placeholder]:before,
unrelated-element input.has-value:hover + label[data-placeholder]:before,
unrelated-element input[type='text'].has-value:hover + label[data-placeholder]:before,
unrelated-element input[type='text'].has-value:focus + label[data-placeholder]:before,
unrelated-element input.has-value:focus + label[data-placeholder]:before,
unrelated-element input.has-value:hover + label[data-placeholder]:before {
}

</style>
</head>
<body>
<custom-element>
    <div class="form-group">
        <input type="text" class="custom-form-control has-value" id="0ad40e91-f280-42d2-b0c5-2b38dd433e80">
        <label for="0ad40e91-f280-42d2-b0c5-2b38dd433e80" data-placeholder="This text should be red" data-alt="This text should be red"></label>
    </div>
</custom-element>
</html>

google-chrome css html
4 Answers

Our customers had similar (intermittent) issues after upgrading to Chrome 103.

After a lot of debugging and hair pulling I've discovered that Chrome simply discards [data-attribute] styles if there are 50 (or more) rules with [data-attribute] without any values ( as opposed to [data-attribute="foo"] working properly).

If you don't see a yellow background on this pen try to delete any [data-children] line from the CSS :-)

I've solved the issue by adding an invalid CSS rule and specify data attribute value in the selector:

[data-attribute="foo"] {
   bar: baz;
}

Value foo needs to exist in at least one place in your HTML.

user_12727810

Not an answer, but I am running into this issue too - started last week too. I can reproduce on one machine in Chrome 103.0.5060.134, but not on a 2nd machine running that same version. I can also reproduce in Chrome Beta (104.0.5112.48) and Chrome Canary (105.0.5190.0).

user_140688220

Answering my own question. After a lot of trial and error...

What finally solved it for me was deleting my "Local State" file in %localappdata%\Google\Chrome\User Data.

It is a json file and after comparing the data to a "clean" file, I changed an attribute at a time.

What seemed to cause the problem for me was the attribute "low_entropy_source3" in "user_experience_metrics". The page worked as expected with the "clean" value while it didn't work with the old value.

Why it solved the problem and why Chrome's behavior is based on that number, I have no idea.

Edit: The solution proved to be temporary. Luckily with could find a more permanent solution based on Luka's advice. Splitting the css solved it in our particular case.

user_195787830

We have had issues too. I ask my team to update Chrome if not, and check if there are some display issues on our client's websites.

At the moment, two of them did and display issues appeared.

We tested it and discovered that if you change custom attribute selector by a native attribute selector (like [role] or whatever), it seems to work fine. The issue is related to custom attribute selector only. In our case, it was [data-siloing].

We will wait for a Chrome update.

user_195857370
Related