Category background images do not scale good for mobile

Внести вклад UX
1

category background image doesn’t scale correctly in mobile ux,

here is the background image in desktop:

png_fixed

the same image in a topic for mobile ux:

jpg_fixed

1 лайк
2

I’m not aware of anyway to add background images to topic pages based on the topic category (which is what the second screenshot looks like) except via a theme.

Category images only show up on top of their pages and on the categories topic-list. How are you adding these images? Can you please share a link to a page where I can see this?

2 лайка
3

here are two samples:

https://padpors.com/c/PP-Porch/Library

even in safe-mode and when the themes are deactivated, you can see the background image in a topic page. e.g. of safe-mode activated page:

5

thanks, but I’m a little bit confused:

we used the category setting to add the background and not a theme.

image
image.png781×635 62.6 KB

2 лайка
6

Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion :sunflower:

I’ll take a look and see what I can do to make it look nicer :+1:

6 лайков
8

Есть какие-то новости по этому вопросу? Я думаю о внедрении этих элементов для нескольких подкатегорий, которые мы собираемся добавить, и они действительно выглядят ужасно на мобильных устройствах…

Или есть способ реализовать уникальный фон для отдельной категории/подкатегории с помощью CSS?

9

Я разобрался, как это сделать, и решил поделиться техникой, которая сработала для меня. Чтобы добавить изображение по адресу https://some.url в качестве фона для категории с идентификатором category-off-topic-rwby, я использовал этот CSS в компоненте темы:

body[class~="category-off-topic-rwby"] {
    #background {
    background: url(https://some.url);
    background-position: center center;
    background-size: cover;
    z-index: -1;
    opacity: .50;
    min-width: 100vw;
    width: auto;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    }
}

Это центрирует изображение по адресу https://some.url и делает его менее насыщенным (используя свойство opacity), а также фиксирует его, чтобы оно не прокручивалось вместе со страницей. Результат:

PNG
PNG1333×1147 364 KB

3 лайка
10

Полагаю, вы используете устройство iOS? Если да, то проблема лишь частично связана с Discourse. Устройства iOS не поддерживают свойство CSS background-attachment: fixed;, которое в настоящее время используется в Discourse для создания эффекта фиксированного фона страницы при установке изображений категорий.

Причина, по которой устройства iOS игнорируют это свойство, связана с их опасениями относительно постоянных перерисовок, которые оно вызывает.

Вот несколько примеров, что я имею в виду:

Если в качестве фона использовать сплошной цвет CSS, то при прокрутке перерисовывается только ползунок прокрутки — зелёная подсветка.

Пока всё хорошо. Однако, как только вы добавите настоящее изображение и объедините его с background-attachment: fixed;, браузеру придётся постоянно перерисовывать его, чтобы оно оставалось на месте при каждой прокрутке.

Обратите внимание, как фон перерисовывается при каждой прокрутке? Именно поэтому устройства iOS не поддерживают это свойство.

Ваше исправление хорошее, но вы всё ещё заставляете браузер перерисовывать фоны, как показано в видео выше.

Это уже давно в моём списке задач, но я постараюсь внедрить исправление в течение следующих трёх недель.

Если вы не можете так долго ждать, вот что я планирую реализовать, и вы можете попробовать это в своей теме.

3 лайка