Media component bug in Chrome 55 (easy fix)

[stevendesu]

Issue

A strange race condition in Chrome for Windows causes <div class="media"> components to display incorrectly sometimes

Details

Having a display: table-cell element whose immediate parent is not a display: table-row or display: table is invalid according to the W3C table spec:

https://www.w3.org/TR/CSS2/tables.html#table-display

However: According to the W3C spec, when an element is misparented an anonymous element should be generated around it with the proper display type. Therefore there should be no issue. And this is, in fact, the case in Internet Explorer and Firefox (did not test Safari or Opera)

A bug or race condition in Chrome causes it to improperly generate these anonymous elements when the page takes too long to render (many DOM elements on the page). The net effect looks like so:

Repro

• Operating system: Windows 10
• Browser: Chrome 55

In order to create this effect I had a page with many elements above the media item:

• A responsive navbar
• A carousel
• A collapsible form with multiple form-groups and inputs
• Images, text, etc

At the bottom of the page I had a card with a media inside of it:

<div class="row">
    <div class="col-sm-6"><!-- Repeated element -->
        <div class="card mx-auto">
            <img class="card-img-top w-100" src="...">
            <div class="card-block px-0 py-0">
                <div class="media">
                    <a class="media-left pr-0" href="...">
                        <img class="media-object" src="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading>...</h4>
                        <div class="pl-1">
                            <p class="small my-0">...</p><!-- Repeated element -->
                        </div>
                </div>
                <a href="..." class="btn">...</a>
            </div>
        </div>
    </div>
</div>

Fix

By setting display: table on .media it generates properly every time:

.media {
    display: table;
}

Fixed:

[bardiharborow]

/cc @cvrebert

[cvrebert]

@stevendesu Please post the URL of your example webpage or a link to a CodePen/JSBin/etc. example that demonstrates the problem, so that we can file a Chrome bug.

[stevendesu]

https://jsbin.com/ruhoqocumo/1/edit?html,output

Note: On my personal server I only had the bug occur intermittently (about 50% of the time) so it was obviously a race condition. On JSBin the bug is happening consistently (100% of the time across 30 page loads) so I think that JSBin has a sufficient number of elements and scripts on the page that it's triggering the race condition every time. To really see the intermittent nature of the bug you may need to save the HTML locally and load it from disk or something (to avoid the overhead of loading JSBin around it)

Edit: I just tested with https://jsbin.com/ruhoqocumo/1/ (doesn't load the JSBin overhead) and the issue did not occur once over 10 page loads, so I may need more trash elements to trigger it. On my personal server I also had a carousel, some cards, a few buttons, and an image above the media components. Tweak the number of trash elements as necessary to trigger the issue on your own computer. Since it seems to be a race condition CPU performance probably factors in to how many elements are necessary to trigger it.

[mdo]

Won't be an issue anymore with #21389—we're going all in on flexbox.