Firefox bug: Figures break grid

[alienlebarge]

Description

When using Figures in a grid, it doesn't fit the width of the container.

Here's a Pen to reproduce the bug

Environment

• Browser version: All firefox version (.zip of screenshots)
• Bootstrap version: 4.0.0-alpha.6

Cause

The problem is caused by the following code:

.figure {
  // Ensures the caption's text aligns with the image.
  display: inline-block;
}

Additional Info

  <div class="row">
    
    <article class="col-md-6">
      <figure class="figure">
        <img src="..." class="figure-img img-fluid rounded" alt="...">
        <figcaption class="figure-caption">...</figcaption>
      </figure>
      <p>...</p>
    </article><!-- /.col-md-6 -->
    
    <article class="col-md-6">
      <figure class="figure">
        <img src="..." class="figure-img img-fluid rounded" alt="...">
        <figcaption class="figure-caption">...</figcaption>
      </figure>
      <p>...</p>
    </article><!-- /.col-md-6 -->

  </div><!-- /.row -->

[alienlebarge]

I'll make a PR asap.

[mdo]

This renders fine for me in latest Firefox on Mac (v52).

[alienlebarge]

@mdo You are right, the problem is in Firefox 45 and older.
The latest one are ok

[rafalp]

45 is previous LTS ("ESR") for FF that Mozilla timetable says will be supported until June 13 this year. Thats something to keep on mind if you have users on it to support (eg. corporate) but then, you shouldn't be using BS4 in the first place if thats the case.

[mdo]

Closing as a won't fix.