Вопрос или проблема
У меня есть демонстрация на CodePen: https://codepen.io/kshetline/pen/gbYVayp
Что происходит:
- Установите
text-indentна ненулевое значение один раз, и текст будет перерисован, чтобы соответствовать этому значению. - Установите
text-indentснова на ненулевое значение, сколько бы раз вы ни хотели, и эти изменения игнорируются. - Установите
text-indentна 0 или измените другие аспекты элемента, такие какwidthилиheight, и тогда Chrome, наконец, правильно выстраивает элемент.
К сожалению, пользователь сообщил мне об ошибке несколько месяцев назад, связанной с этой проблемой (поэтому ошибка существует уже некоторое время), прежде чем я занялся ее расследованием. Я ошибочно полагал, что проблема связана только с Raspberry Pi, и в частности с новым десктопом Wayland, с которым я не спешил разбираться.
Я придумал некрасивый хак (изменяю высоту моего элемента туда-сюда между двумя близкими значениями для каждого изменения в text-indent), но я бы хотел увидеть, чтобы коренная проблема была действительно решена.
Обозреватели на базе Chromium на Windows, macOS — и там, где ошибка была впервые обнаружена, на Raspberry Pi под управлением Raspbian OS — показывают эту проблему. Firefox и Safari не показывают эту ошибку, и до некоторого времени несколько месяцев назад у обозревателей на базе Chromium этой проблемы тоже не было.
Как лучше всего сделать так, чтобы эта ошибка получила внимание, которого, как я считаю, она заслуживает? Я не могу быть единственным, кто использует программно обновляемый text-indent для создания анимации. (Нет ни одного CSS-решения, которое я видел, для этого конкретного вида анимации бегущей строки с плотным обертыванием, где нет большого пустого промежутка между каждым повтором.)
.
Ответ или решение
Ваша проблема с багом в браузере Chromium, связанным с использованием CSS-свойства text-indent, заслуживает внимательного анализа и системного подхода к её решению. Рассмотрим данный вопрос в трех аспектах: теоретическом, приведем конкретные примеры и определим, как вы можете практически применить основные подходы к его устранению.
Теоретический аспект
CSS-свойство text-indent позволяет смещать первую строку блокового элемента относительно других строк этого блока. Обычно такая функциональность применяется для создания разнообразных визуальных эффектов, включая анимации и изменения макета текста. Однако, как показывает ваша ситуация, реализация в движке Chromium, похоже, недооценивает важность динамического обновления этого свойства. Когда text-indent изменяется более одного раза, дальнейшие изменения не учитываются до тех пор, пока не изменится контекст элемента, например, путём обнуления text-indent или коррекции других свойств, таких как width или height.
Примеры
-
Воспроизведение дефекта: На CodePen было продемонстрировано, что, заявляя
text-indentнеоднократно, только первое не-нулевое значение применяется, в то время как последующие игнорируются. Это поведение можно воспроизвести в браузерах на базе Chromium под управлением различных операционных систем, включая Windows, macOS и Raspbian OS на Raspberry Pi, как вы это и нашли. -
Исправление через хаки: При этом, временное решение действительно было достигнуто путем изменения
height, однако это решение, безусловно, неудобно для поддержания и может отрицательно сказаться на производительности или повлечь за собой непредсказуемые наслежствия в будущем.
Приложение на практике
1. Сообщение об ошибке:
- Перейдите на платформу для сообщения об ошибках Chromium (https://bugs.chromium.org/) и создайте подробное и аргументированное сообщение об ошибке. Убедитесь, что вы включили максимум информации, такой как шаги для воспроизведения ошибки, ссылки на демонстрации, вроде вашей CodePen, и технические детали о ваших тестах и средах, где ошибка проявляется.
- Можно также приложить скриншоты, записи экрана или GIF-анимации демонстрирующие поведение браузера с описанной аномалией.
2. Взаимодействие с сообществом:
- Обратитесь к сообществу разработчиков через специальные форумы и группы в социальных сетях, такие как Reddit (subreddit r/webdev), Stack Overflow и специализированные группы в LinkedIn или Facebook. Это поможет повысить осведомленность о проблеме и, возможно, привлечет людей, которые уже сталкивались с ней и имеют свои наработки или пути к её решению.
3. Временные подходы:
- Рассмотрите возможность использования JavaScript для ручного управления или анимации текста, используя методы манипулирования DOM-деревом. JavaScript может использоваться для обновления текстового содержимого или его стилей более контролируемо.
- Если подход с JavaScript не предпочтителен, вы можете экспериментировать с
transformиtransition, которые могут предоставить аналогичные эффекты, но по-другому управляясь в современных браузерах.
4. Следите за обновлениями:
- Учитывая, что эта проблема возникла в последние месяцы, наблюдайте за обновлениями транспорта Chromium, так как возможно, что в новых ревизиях движка V8, который лежит в основе Chromium, вопрос уже решится.
В заключение, ваш внимательный и системный подход к выявлению и обсуждению этой проблемы — это первый шаг к её скорейшему устранению. Освещая её на всех возможных платформах и взаимодействуя с сообществом разработчиков, вы вносите вклад в улучшение пользовательского опыта для многих людей, которые могут находиться в аналогичной ситуации.