Le immagini di sfondo delle categorie non si adattano bene su mobile

Contribuisci 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 Mi Piace
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 Mi Piace
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 Mi Piace
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 Mi Piace
8

Ci sono novità in merito? Sto pensando di implementarli per alcune sottocategorie che stiamo per aggiungere, e in effetti su mobile sembrano davvero orribili…

In alternativa, esiste un modo per implementare uno sfondo unico per una categoria/sottocategoria specifica utilizzando il CSS?

9

Ho scoperto come farlo e ho pensato di condividere la tecnica che ha funzionato per me. Per aggiungere l’immagine all’indirizzo https://some.url come sfondo per la categoria con l’ID category-off-topic-rwby, ho utilizzato questo CSS in un componente del tema:

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);
    }
}

Questo centra l’immagine all’indirizzo https://some.url e la desatura (utilizzando la proprietà opacity), oltre a renderla fissa in modo che non scorra con la pagina. Il risultato:

PNG
PNG1333×1147 364 KB

3 Mi Piace
10

Immagino tu stia usando un dispositivo iOS? Se è così, la colpa è solo in parte di Discourse. I dispositivi iOS non rispettano background-attachment: fixed;, la proprietà CSS attualmente utilizzata in Discourse per ottenere l’effetto di uno sfondo del corpo fisso quando si impostano immagini per le categorie.

Il motivo per cui i dispositivi iOS ignorano quella proprietà è dovuto alle loro preoccupazioni riguardo al continuo ridisegno che provoca.

Ecco alcuni esempi di cosa intendo,

Se usi un colore CSS solido come sfondo, l’unico elemento che viene ridisegnato mentre scorri è la barra di scorrimento - evidenziato in verde.

Fin qui tutto bene. Tuttavia, una volta aggiunta un’immagine reale e combinata con background-attachment: fixed;, il browser deve ridisegnarla costantemente per mantenerla in posizione ad ogni scorrimento.

Notate come lo sfondo venga ridisegnato ad ogni scorrimento? È per questo motivo che i dispositivi iOS non rispettano quella proprietà.

La tua soluzione è buona, ma stai comunque costringendo il browser a ridisegnare gli sfondi proprio come nel video sopra.

Questo è sulla mia lista da un po’, ma cercherò di inserire una correzione entro le prossime tre settimane.

Se non puoi aspettare così a lungo, ecco cosa intendo implementare e puoi provarlo nel tuo tema.

3 Mi Piace