Vue + Vuetify Chrome 视觉故障答案

【问题标题】：Vue + Vuetify Chrome visual glitchesVue + Vuetify Chrome 视觉故障
【发布时间】：2020-12-01 10:21:11
【问题描述】：

在最近一次 Chrome 更新后，我开始在使用 Vuetify 的 Vue 网站上的 Chrome 上看到非常奇怪的视觉故障。甚至很难描述这个问题，但它看起来像这样：

半透明（有时是不透明）块会随着不同元素获得焦点和滚动而出现和消失。我在 Windows 和 Mac 的 chrome 中都得到了这个。也在更新的 Edge（基于铬）中，但不在 Firefox 或 Safari 中。

那个半透明的红色块是我的主题的原色。我尝试将我的主题颜色更改为蓝色，这将故障颜色更改为蓝色 - 通过此我试图强调我不认为这是某种开发工具渲染/更新的视觉块的事情。

我不知道哪个版本的 Chrome 专门引入了这个问题，但我已经确认它不会在 86.0.4240.198 中发生，并且在 87.0.4280.66 中发生（在撰写本文时是最新的）。

【问题讨论】：

您是否更改了任何默认的 Vuetify 样式？
@AdamOrlov - 我有一个 theme.js 文件，我在其中更改了主要颜色和次要颜色并添加了一些自定义颜色，但除此之外，它都是库存/配置的 vuetify。
@AdamOrlov - 我去寻找以确保我之前的陈述是真实的。我发现 v-combobox 元素上的一些自定义样式似乎是导致问题的原因。谢谢你为我指明了正确的方向。

【解决方案1】：

主要的搜索输入是一个 vuetify v-combobox 控件。我在这个控件上有一些自定义样式，将fieldset（控件呈现的 HTML 的一部分）设置为具有白色背景。这是整个样式：

.smc-textfield-tall fieldset {
  background-color: #fff;
}

删除它会导致视觉故障消失。我不知道为什么这会导致故障 - 我必须有一些其他样式（无论是自定义的还是 vuetify 的一部分）与这种简单的背景颜色相结合会导致这种行为。

我会再深入研究一下。

【讨论】：