分类背景图片在移动设备上缩放效果不佳

贡献 用户体验
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 处的图片作为 ID 为 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 设备不遵循 background-attachment: fixed; 这一 CSS 属性，而该属性目前被 Discourse 用于在设置分类图片时实现固定背景的效果。

iOS 设备忽略该属性的原因是出于对持续重绘问题的担忧。

以下是一些示例说明我的意思：

如果你使用纯色 CSS 作为背景，滚动时唯一需要重绘的只是滚动条——绿色高亮部分。

到目前为止一切正常。然而，一旦你添加实际图片并结合 background-attachment: fixed;，浏览器就必须不断重绘以保持背景位置，每次滚动都会触发重绘。

注意到背景随着每次滚动都被重绘了吗？这就是 iOS 设备不遵循该属性的原因。

你的修复方案不错，但你仍然导致浏览器像上面视频所示那样重绘背景。

这个问题我已经列入计划一段时间了，但我会在接下来的三周内尽量安排修复。

如果你无法等待那么久，以下是我打算实施的方案，你可以在自己的主题中尝试使用：

3 个赞