0

我目前在www.thejasonsanders.com的网站上工作,每当我尝试在除第一个部分(“主页”)之外的任何部分中为 div 提供固定位置时,div 都会消失。我已经尝试了我能想到的一切来纠正这个问题,但似乎没有任何解决办法。所以,我正在转向可能是我在这些类型事务中的第一资源!

我目前正在“Portdiv”和“Portdiv2”下的“投资组合”部分中测试一个图像,其样式与主徽标图像相同。主徽标图像位于主页部分,位置固定,并且显示正确。再次,只有当图像被放置在其他部分之一时,事情才开始变得奇怪。谁能帮我弄清楚发生了什么?

感谢您的时间和帮助!

4

2 回答 2

0

当一个 div 被赋予一个固定的位置并且它在视口之外时基本上不存在。我认为这就是你面临的问题。这是一个快速演示。请注意,当您使浏览器窗口变高或变短时,<img>s 会消失。您可能想使用position: absolute? 对不起,如果我离开了。

于 2013-08-01T00:49:25.867 回答
0

我遇到了同样的问题,这似乎是页面内部发生太多事情时发生的错误,我能够通过将以下转换代码添加到固定位置元素(transform: translateZ(0);-webkit-transform: translateZ(0);)来修复它,这会强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面,Web 应用程序在浏览器的上下文中运行,这使软件可以完成大部分(如果不是全部)渲染,从而减少了转换的动力。但是 Web 一直在迎头赶上,现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU,使它们更平滑(更高的 FPS)。

注意: translate3d(0,0,0) 对您看到的内容没有任何作用。它在 x、y 和 z 轴上将对象移动 0px。这只是一种强制硬件加速的技术。

#fixed-element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
于 2014-09-18T23:20:32.657 回答