Menu
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>
708
asked Oct 27 '25 12:10
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.
173
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).
20
answered Oct 29 '25 01:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
