CSS attribute selector does not work in Chrome-CodePudding

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 >
        <input type="text"  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>

CodePudding user response：

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.

CodePudding user response：

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).

CodePudding user response：

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.

CodePudding user response：

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.