На форуме Discourse intfiction.org мы много говорим о загадочных приключенческих играх, поэтому тег [spoiler] очень помогает. В этой теме есть множество отдельных тегов spoiler, по одному для каждой подсказки.
Эта страница работает нормально в Google Chrome, но плохо в Firefox, а также не справляется на медленных телефонах Android. На Firefox на Android она работает невероятно медленно. (Прокрутите немного вниз, чтобы понять, о чём речь.)
В этом, скорее всего, виноват Firefox.
Тем не менее, я считаю, что плагин spoiler должен устанавливать для текста spoiler color: black; background: black вместо filter: blur(0.5em) на браузерах/платформах, которые обрабатывают размытие медленно или плохо (Firefox, Android).
С помощью CSS это должно реализовать то, что вы описали: фон, совпадающий с текстом. Добавление этого в компонент темы должно переопределить CSS плагина… хотя это не сработает для изображений в спойлерах.
Это внесет изменения во всех браузерах. Если вы хотите нацелиться только на Firefox, вам потребуется определить user-agent в JS.
.spoiler-blurred {
filter: none;
background: var(--primary);
color: var(--primary);
}
.discourse-no-touch .spoiler-blurred:hover {
filter: none;
/* здесь можно добавить другой эффект при наведении */
}
.spoiled {
background: transparent;
}
Жаль слышать о плохой производительности Firefox. Мы официально не поддерживаем Firefox на Android, но, похоже, проблема затрагивает Firefox на всех платформах. Возможно, стоит рассмотреть возвращение к нашему старому методу создания синего цвета с помощью text-shadow вместо filter…
А что насчёт обновления мода, чтобы добавить стиль с чекбоксом для «размытия спойлеров/скрытия спойлеров»? Скрытие спойлеров закрывало бы текст спойлеров чёрной полосой, что могло бы избавить браузер от накладных расходов на рендеринг текста с размытием.
Это как минимум позволило бы создать специфичную «мобильную» тему, которая могла бы включать все более быстрые и специализированные для мобильных устройств моды.
Для ясности: я воспроизвожу ошибку медленного размытия 925025 на этой тестовой странице в Firefox 79.0 для macOS Catalina 10.15.5 на MacBook Pro 2019 года с экраном 16".
Firefox затрачивает 96 141 мс на выполнение размытия, тогда как Chrome — 9 998 мс. Возможно, это исправлено в nightly-сборке?
РЕДАКТИРОВАНИЕ: Да, исправлено. В версии 81.0a1 (2020-08-10) (64-бит) тестовый сценарий с вложениями занимает 10 006 мс, а страница Discourse, полная спойлеров, отображается очень плавно.
Похоже, что пока нам не стоит ничего предпринимать и просто дождаться, пока Mozilla внедрит свои исправления.
Я считаю, что настоящее исправление — это WebRender, который в настоящее время становится включённым по умолчанию, согласно http://arewewebrenderyet.com/.
Он уже включён там, где находится большинство пользователей (Windows), и скоро появится в других местах! Это также первое, что мы включаем на новом ПК в нашей команде .
.