页面滚动时闪烁

发布于 2024-11-05 08:42:42 字数 242 浏览 3 评论 0原文

任何想法为什么此页面: http://mpdteam.net/projects.html 在滚动时闪烁?我确定这是由于主要内容容器的背景造成的,但为什么呢?是眼睛欺骗、图像缺陷、浏览器缺陷还是代码缺陷?使用查看源代码或开发工具可以轻松查看代码。

如果您需要更多信息,请告诉我。谢谢。 (另外,请随意重新标记。我对好的标签一片空白)

Any ideas why this page: http://mpdteam.net/projects.html is flashing when it scrolls? I've determined it's due to the background of the main content container, but why? is it a eye-trick, an image flaw, a browser flaw, or a code flaw? The code is easily viewable with view source or dev tools.

Let me know if you need anymore info. thanks.
(also, feel free to re-tag. i'm having a mind-blank for good tags)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

酒废 2024-11-12 08:42:42

这是因为它使用了间隔很细的灰色和白色线条。

它可能是莫尔图案的一个示例,尽管这更通常保留用于两个不同角度重叠的网格。

我一直认为在 PC 上发生这种情况是因为两种颜色之间的重画时间以及线条的间距有多细。与像素不完全对齐的线条(例如抗锯齿)将进一步增强闪烁效果。

要解决此问题,请尝试更改带的大小(例如,尝试缩小或放大当前页面,然后移动浏览器,并注意如何减少甚至没有所描述的闪烁效果)。

或者,您可能想要应用模糊,以便软化波段之间的差异(不确定这是否一定有帮助)。

研究得出的另一个建议是,这是由于背景重绘/缩放造成的。但是,固定背景(与重复背景相比)并不特别适用于您的页面。

无论如何,要深入讨论所涉及的一些概念,请查看这个很棒的页面 (http:// /www.techmind.org/lcd/

It's because it uses finely spaced grey and white lines.

It is perhaps an example of the Moiré pattern, although this is more typically reserved for two overlapping grids at different angles.

I always assumed on a PC this occurred because of the redraw time between the two colours, and how finely spaced the lines are. The lines not perfectly aligning with pixels (e.g. anti-aliasing) would further enhance the flickering effect.

To fix it, try changing the size of the bands (e.g. try zooming out or in on the current page, and moving the browser, and note how you get reduced and even none of the described flickering effect).

Alternatively, you may want to apply a blur such that the difference between bands was softened (not sure if this would necessarily help).

Another suggestion that research yields is that it is due to background redrawing/scaling. However, a fixed background (as compared to a repeating one) isn't particularly applicable to your page.

In any case, for an in-depth discussion of some of the concepts involved, check out this awesome page (http://www.techmind.org/lcd/)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文