Les images d'arrière-plan des catégories ne s'adaptent pas bien sur mobile

Contribuer 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 « J'aime »
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 « J'aime »
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 « J'aime »
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 « J'aime »
8

Des nouvelles à ce sujet ? Je songe à les mettre en œuvre pour quelques sous-catégories que nous sommes sur le point d’ajouter, et elles ont effectivement l’air affreuses sur mobile …

Sinon, existe-t-il un moyen d’implémenter un arrière-plan unique pour une catégorie ou une sous-catégorie spécifique en utilisant CSS ?

9

J’ai trouvé comment faire et j’ai pensé partager la technique qui a fonctionné pour moi. Pour ajouter l’image située à l’adresse https://some.url en tant qu’arrière-plan de la catégorie dont l’identifiant est category-off-topic-rwby, j’ai utilisé ce code CSS dans un composant de thème :

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

Cela centre l’image située à https://some.url et la désature (en utilisant la propriété opacity), tout en la fixant pour qu’elle ne défile pas avec la page. Voici le résultat :

PNG
PNG1333×1147 364 KB

3 « J'aime »
10

Je suppose que vous utilisez un appareil iOS ? Si c’est le cas, la faute incombe en partie seulement à Discourse. Les appareils iOS ne respectent pas background-attachment: fixed;, qui est la propriété CSS actuellement utilisée dans Discourse pour créer l’effet d’un arrière-plan de corps fixe lorsque vous définissez des images de catégorie.

La raison pour laquelle les appareils iOS ignorent cette propriété est liée à leurs préoccupations concernant le redessin constant qu’elle provoque.

Voici quelques exemples de ce que je veux dire :

Si vous utilisez une couleur CSS unie comme arrière-plan, la seule chose qui est redessinée lors du défilement est la barre de défilement — surlignage vert.

Jusqu’ici tout va bien. Cependant, dès que vous ajoutez une véritable image et que vous la combinez avec background-attachment: fixed;, le navigateur doit constamment la redessiner pour la maintenir en place à chaque défilement.

Remarquez comment l’arrière-plan est redessiné à chaque défilement ? C’est pourquoi les appareils iOS ne respectent pas cette propriété.

Votre correctif est bon, mais vous continuez à obliger le navigateur à redessiner les arrière-plans, tout comme dans la vidéo ci-dessus.

Cela figure sur ma liste depuis un moment, mais je vais essayer de trouver un moyen d’intégrer un correctif dans les trois prochaines semaines.

Si vous ne pouvez pas attendre aussi longtemps, voici ce que je prévois d’implémenter, et vous pouvez l’essayer dans votre thème.

3 « J'aime »