CSS＆＃34;显示：块＆＃34;不适用于Android版Chrome

Question

我已经在我的博客上写了一篇新帖子，除了 Chrome for Android 4.4.4 （KitKat）外，所有浏览器的页面都很好看。 更新：也不适用于Android Marshmallow。

这个特定帖子唯一不同的是一个可滚动的表格，在自定义样式表上设置样式：

.article_body table {
    width: 100%;
} 
@media screen and (max-width: 479px) {
    .article_body table {
        width: auto;
        display: block;
        overflow: auto;
        overflow-x: scroll;
        white-space: nowrap;
        border-collapse: collapse;
        border-spacing: 0;
        clear: both;
        -webkit-overflow-scrolling:touch;
        touch-action: auto;
        -ms-touch-action: auto;
    }   
}

该表可在所有浏览器中滚动，但Android上的Chrome除外。但最重要的是帖子从某个点开始显示白色块，直到帖子结束，如下面的屏幕截图所示：

错误开始

错误结束：

测试：

• PC，Win 7（IE 11，Chrome，Firefox） - 确定
• iPhone，iOS 9.3.1（Chrome和Safari） - 确定

• Windows Phone（IE） - 确定

• Moto G - Mozilla Firefox - 确定

• Moto G - 谷歌浏览器 - 失败（仅限肖像）

我的博客中的所有其他帖子都适用于所有这些浏览器。

CSS测试：

经过一些测试后，我发现错误依赖于display:block;。

如果我更改或删除此属性，Chrome上的白色块会消失，但所有其他浏览器的布局都很糟糕。

我该怎么做才能解决这个问题？！

博文：http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html

Android版：Android 4.4.4; XT1032 Build/KXB21.14-L1.40

Chrome：49.0.2623.105

Answer 1

我发现了白色区域的问题。它位于animate.css中更改以下行;

<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">

进入这个：

<div class="header-color col-sm-9 col-sm-offset-3">

我怀疑其中有2000px值的过渡（fadein）是导致白色空间/切断问题的过渡。

您也可以将此值乘以10以解决此问题。

Answer 2

好吧，感谢@JoostS这些见解，我设法通过仅针对Chrome的@media查询解决了这个恼人的错误：

/* @media queries for Chrome 29+ only */

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) and (max-width: 479px) {
    .fadeIn {
        display: initial;
        margin-left: 5% !important;
    }
    article {
        padding-left: 5%;
        padding-right: 5%;
    } 
}

有关更多Chrome媒体查询，请参阅https://gitlab.com/snippets/17238。