为什么静态定位div从其位置向上移动? [英] Why does this static positioned div moves upward from its position?
问题描述
.columns.fauxcolumns
)从顶部裁剪 。基本上它是隐藏的( overflow:hidden
在那里),它从它的正常位置向上10-20个像素;流出 .columns.fauxcolumns
,即使它( .colums-inner
)也是静态的。 如何检查/重新制作:
- 请访问 解决方案
我发现问题是
加载
类在页面加载后没有被删除。这与JavaScript有关。正确的应该是脚本应该自动从< body>
中移除loading
类。由于这是演示文稿中的一个展示器,因此可以使用以下CSS进行修改:
.loading .main-inner .columns.fauxcolumns {
overflow:visible;
}
This seems a very frustrating issue in my blog. I can reproduce it only in Chrome (60+). The main div (
.columns.fauxcolumns
) where the header and content are displayed is cropped from the top. Basically it's hidden (overflow:hidden
is there) and somehow it is 10-20 pixels upwards from its normal position; flows out of.columns.fauxcolumns
, even it (.colums-inner
) is static.How to inspect / re-produce:
- Please visit https://sourcewing.blogspot.in/search/label/articles
Control + Click
on MORE in the first article (to open in new tab)- Before the page is loaded fully in the tab that you've just opened, click on the tab and DON'T SCROLL the page. SCROLL UP ONLY WHEN PAGE IS FULLY LOADED.
- When you'll scroll up, you'll probably find the issue.
You might not find it with just one try as it's produced in this scenario only.
Why is it happening? I know we can somehow fix it but I believe it's not a normal issue as it is observed only in Chrome.
The following screenshot might help:
Note: November 28, 2015 is cropped in screenshot.
解决方案I found the issue being the
loading
class not been removed after the page has loaded. This is something to do with JavaScript. The correct one should be the script should automatically remove theloading
class from<body>
. Since this being a show-stopper in the presentation, it can be kinda fixed using the following CSS:.loading .main-inner .columns.fauxcolumns { overflow: visible; }
这篇关于为什么静态定位div从其位置向上移动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!