从上周开始，我们的网站在当前版本的谷歌浏览器上出现了CSS问题.该页面在Edge和Firefox上正常工作.
奇怪的是，这似乎只发生在一些机器上，或者可能发生在Chrome实例上.无论设置是否重置和刷新，或匿名模式无法解决该问题.
它似乎与CSS中的属性 Select 器有关.我们发现的最小的可重复例子很奇怪.它包含许多不相关的样式，删除(看似)不相关的样式可以使页面正常工作.
当它工作时，下面页面上的文本是红色的.当它不工作时，文本为黑色.
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>