CODEWITHSUNDEEP
androidhtmlcssgoogle-chromemobile
Virtua Creative
Virtua Creative

Reputation: 2113

CSS "display:block" not working on Chrome for Android

I've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.

The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:

.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;
    }   
}

The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:

Beginning of the error

error beginning

End of the error:

error end

TESTS:

All the other posts within my blog are ok on all these browsers.

CSS test:

After some tests I've found out the error relies on display:block;.

If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.

What should I do to fix this?!

Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html

Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40

Chrome: 49.0.2623.105

Upvotes: 0

Views: 2207

Answers (2)

Virtua Creative
Virtua Creative

Reputation: 2113

Well, thanks to @JoostS insights I managed to fix this annoying error myself with this @media query for Chrome only:

/* @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%;
    } 
}

See https://gitlab.com/snippets/17238 for more Chrome media queries.

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12590

I found the problem for the white area. It lies in the animate.css Change the following line;

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

Into this:

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

I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.

You can probably also multiply this value by 10 to solve this problem.

Upvotes: 1

Related Questions