# Imagens de fundo de categoria não escalonam bem para mobile

**URL:** <https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149>\
**Category:** UX\
**Created:** [Agosto 20, 2018, 6:24am UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149 "2018-08-20T06:24:37Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [Setembro 17, 2019, 8:40am UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/10 "2019-09-17T08:40:00Z")

</div>

> [@cjk77](#):
>
> Estou pensando em implementar isso para algumas subcategorias que vamos adicionar, e elas realmente ficam horríveis no mobile.

Estou supondo que você esteja usando um dispositivo iOS? Se sim, isso é realmente apenas parcialmente culpa do Discourse. Dispositivos iOS não respeitam `background-attachment: fixed;`, que é a propriedade CSS atualmente usada no Discourse para criar o efeito de um fundo fixo no corpo da página quando você define imagens de categoria.

A razão pela qual os dispositivos iOS ignoram essa propriedade é devido às preocupações com a repintura constante que ela causa.

Aqui estão alguns exemplos do que quero dizer:

Se você usar uma cor CSS sólida como fundo, a única coisa que é repintada enquanto você rola a página é a barra de rolagem – destaque verde.

[https://global.discourse-cdn.com/meta/original/3X/4/8/48610cb3cfe6aa4093840e6cabe2e9b671b3dab9.mp4](https://global.discourse-cdn.com/meta/original/3X/4/8/48610cb3cfe6aa4093840e6cabe2e9b671b3dab9.mp4)

Até aqui, tudo bem. No entanto, assim que você adiciona uma imagem real e a combina com `background-attachment: fixed;`, o navegador precisa repintá-la constantemente para mantê-la no lugar a cada rolagem.

[https://global.discourse-cdn.com/meta/original/3X/e/9/e98901f6c5b71daa6d1443f2ccd5c56d53ca6eda.mp4](https://global.discourse-cdn.com/meta/original/3X/e/9/e98901f6c5b71daa6d1443f2ccd5c56d53ca6eda.mp4)

Perceba como o fundo é repintado a cada rolagem? É por isso que os dispositivos iOS não respeitam essa propriedade.

Sua solução é boa, mas você ainda está fazendo o navegador repintar os fundos, assim como no vídeo acima.

Isso já está na minha lista há algum tempo, mas vou tentar encaixar uma correção nas próximas três semanas.

Se você não puder esperar tanto tempo, aqui está o que pretendo implementar e você pode testar isso no seu tema:

> **[Fix scrolling performance with CSS will-change property - Four Kitchens](https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/)**
>
> I recently saw Paul Lewis' screencast demonstrating how trivial it can be to fix a particular kind of performance issue caused by scrolling. I knew the problem looked familiar and I realized it was happening right in my front yard, on the Four...

---

_[View the full topic](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149)._