Я сталкиваюсь с ошибкой на рябь флажка Материал, когда я реализую его в компоненте Svelte. Я не нашел подходящего решения этой проблемы, поэтому после долгих исследований я спрашиваю сообщество. Я явно не имею понятия, произошла ли ошибка от Svelte или Material.
Я создал репозиторий с ошибочным компонентом Svelte, а затем объясняю, как запустить ошибку.
Начало работы
Что реализовано?
Это приложение содержит два компонента: основной компонент App и компонент Checkbox, определяющий флажок Материал. Флажок обернут в поле формы Материал.
Дизайн материала загружен в глобальную таблицу стилей App.s css. Чтобы связать это, svelte-preprocess используется с sass для S CSS и postcss для глобальных стилей.
Наблюдаемая ошибка
Пульсация флажка Material имеет огромный размер. Она достаточно велика, чтобы включить вертикальную и горизонтальную прокрутку на странице, и она отображается при наведении курсора на флажок: в правом нижнем углу страницы появляется огромный серый круг.
Как запустить ошибку?
- Запустите приложение, запустив
npm run dev. - Go до http://localhost: 5000 / .
- Насколько я знаете, ошибка никогда не появляется, когда приложение загружается сразу после сборки приложения.
- Refre sh страница. Если вам повезет, возможно, у вас уже есть ошибка. Если нет, принудительно выполните refre sh несколько раз подряд, не позволяя странице загружаться, и дождитесь загрузки страницы после последнего принудительного refre sh.
Исследования уже выполнены
- Размер и положение пульсации определяются тремя CSS переменными
--mdc-ripple-fg-size, --mdc-ripple-left и --mdc-ripple-top, определенными для элемента, имеющего класс .mdc-checkbox. - Эти три переменные инициализируется Material при создании экземпляра
MDCCheckbox в onMount компонента Checkbox (l17 в /src/Checkbox/Checkbox.svelte). - Похоже, что для По некоторым неизвестным причинам, элемент флажка HTML, используемый для создания экземпляра
MDCCheckbox, равен , иногда , не полностью отрисован в этой точке, и поэтому width и height соответствуют размеру окна. Поскольку эти два значения используются Материалом для вычисления переменных пульсации CSS, это приводит к некорректному измерению пульсации. - Ошибка никогда не появляется при отладке JavaScript с точкой останова в качестве задержки из-за точка останова предоставит браузеру время для полной визуализации флажка.
Временное исправление
Я скрываю переполнение флажка, поэтому прокрутка отсутствует и отображается огромный круг. Я слушаю событие фокуса на флажке, поэтому, когда происходит фокусировка, я снова вычисляю переменные пульсации CSS до их реального значения, поскольку в этот момент флажок отображается точно.
В результате получается, что пульсации сначала не отображаются, а затем правильно отображаются при следующей фокусировке. Для меня это не окончательное исправление ошибки (и, по моему мнению, я не должен был делать это, чтобы эта пульсация работала).
Я заметил, что Svelte Material UI делает не иметь этой проблемы с флажком Материал. Но обратите внимание, что я не хочу использовать его, так как Material Web Components уже достаточно большой черный ящик в моем коде. Я хочу сохранить контроль над своим кодом, и я делаю уступку только для MW C.