Svelte的巨大材质复选框波纹

Question

在Svelte组件中实现“材质”复选框波纹时，我遇到了一个错误。我尚未找到解决此问题的合适方法，因此经过长期研究，我向社区提出了要求。 我显然不知道该错误来自Svelte还是Material。

我用有问题的Svelte组件创建了一个存储库，此后是有关如何运行该错误的说明。

开始使用

• 在您的计算机上克隆https://github.com/mlbiche/bug-svelte-material-checkbox.git。
• 只需运行npm install就可以了。

实现了什么？

此应用程序包含两个组件，App主组件和定义材料复选框的Checkbox组件。复选框包装在“材料”表单域中。

材料设计已加载到全局的 App.scss 样式表中。捆绑在一起，svelte-preprocess与sass一起用于SCSS，postcss则用于全局样式。

观察到的错误

“材料”复选框的涟漪尺寸很大。它足够大，可以在页面上进行垂直和水平滚动，并且悬停在复选框上时可以看到：页面右下角出现一个巨大的灰色圆圈。

如何运行错误？

• 通过运行npm run dev启动应用程序。
• 转到http://localhost:5000/。
• 据我所知，在构建应用程序后立即加载应用程序时，错误就不会出现。
• 刷新页面。如果幸运的话，您可能已经出现了该错误。如果不是，请在不让页面加载的情况下连续刷新几次，直到最后一次强制刷新后再加载页面。

调查已经完成

• 波纹大小和位置由在类为--mdc-ripple-fg-size的元素上定义的三个CSS变量--mdc-ripple-left，--mdc-ripple-top和.mdc-checkbox定义。
• 当实例化MDCCheckbox组件（/ src / Checkbox / Checkbox.svelte中的l17）的onMount中的Checkbox中的MDCCheckbox时，这三个变量由Material初始化。。
• 由于某些未知的原因，用于实例化width的复选框HTML元素似乎有时目前未完全呈现，因此height和{ {1}}对应于窗口大小。由于Material使用这两个值来计算波纹CSS变量，因此会导致波纹尺寸错误。
• 使用断点调试JavaScript时，该错误永远不会出现，因为断点引起的延迟将使浏览器有时间完全渲染该复选框。

临时修复

我隐藏了复选框溢出，因此没有滚动和大圆圈显示。我正在听复选框上的focus事件，因此当焦点发生时，我再次将涟漪CSS变量计算为它们的真实值，因为此时已确定呈现复选框。

结果是，起初没有显示波纹，然后在随后的焦点上正确显示了波纹。对我来说，这不是确定的错误修复程序（我认为，不必使此波动起作用）。

我注意到Svelte Material UI的“材料”复选框没有此问题。但是请注意，我不想使用它，因为Material Web Components在我的代码中已经足够大。我想控制自己的代码，而我只是对MWC做出让步。