www.bostonglobe.com - Incorrect display of the "Score" tables

[scott-feier]

URL: https://www.bostonglobe.com/sports/nfl/scoreboard/?p1=SectionFront_Utility

Browser / Version: Firefox 93.0 Operating System: Windows 10 Tested Another Browser: Yes Edge

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: On MS Edge (Chrome based), page renders correctly, showing box scores on left part of page and menu on the right. On Firefox (even in troubleshooting mode), box scores span the entire page, can only be seen when in full screen mode

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<table class="matchup">
 <tbody>
  <tr class="hdr">
   <td class="name hdr">8:20 p.m.</td>
   <td class="half hdr">1</td>
   <td class="half hdr">2</td>
   <td class="half hdr">3</td>
   <td class="half hdr">4</td>
   <td class="total hdr">T</td>
  </tr>

 <!--cut out---->
</div>

Note:

1. The issue is not reproducible on Chrome and Microsoft Edge.
2. Setting table layout: auto or removing table layout: fixed, the table is displayed correctly, and does not break in Chrome.

Tested with: Browser / Version: Firefox Nightly 96.0a1 (2021-11-010), Firefox Release 93.0 Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

The total percentage of columns is wider than 100% (110% exactly of the width). But that doesn't create the issue.

<table class="matchup">
  <tbody>
    <tr class="hdr">
      <td class="name hdr">1 p.m.</td>
      <td class="half hdr">1</td>
      <td class="half hdr">2</td>
      <td class="half hdr">3</td>
      <td class="half hdr">4</td>
      <td class="total hdr">T</td>
    </tr>
    <tr>
      <td class="name"><img src="https://www.deadlinesports.com/bostonglobe/gsports/nfl/2021/logos/17.png" alt="New England" pinger-seen="true" width="30" height="20"><a style="text-decoration: none;" href="https://www.bostonglobe.com/sports/nfl/schedule/?team=new-england-patriots" target="_blank">New England</a></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="name"><img src="https://www.deadlinesports.com/bostonglobe/gsports/nfl/2021/logos/29.png" alt="Carolina" pinger-seen="true" width="30" height="20"><a style="text-decoration: none;" href="https://www.bostonglobe.com/sports/nfl/schedule/?team=carolina-panthers" target="_blank">Carolina</a></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="half"></td>
      <td class="total"></td>
    </tr>
  </tbody>
</table>

So indeed removing table-layout: fixed is fixing the issue.

Another way to fix it is

/* Inline #0 | https://www.bostonglobe.com/sports/nfl/scoreboard/?refresh=true */

.grid {
  /* flex: 0 1 auto; */
  flex: 0 1 100%;
}

@aethanyc It looks like a bit https://bugzilla.mozilla.org/show_bug.cgi?id=1469649 but this was fixed. I wonder if it's a special case.

[dholbert]

Somewhat-reduced testcase: https://jsfiddle.net/dholbert/8kgty6v9/

(The content fits the viewport in Chrome, but runs off the edge in Firefox.)

[karlcow]

With @dholbert testcase Blink, WebKit, Gecko

[karlcow]

@dholbert

.grid {
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
}

There's yet another change to fix this

/* Inline #0 | https://www.bostonglobe.com/sports/nfl/scoreboard/?refresh=true */

.grid {
  /* flex-flow: row wrap; */
  flex-direction: column;
}

and fix the alignment of the items in the content.

[karlcow]

@BostonGlobe is on github. The only contact person there is @daigofuji Maybe @daigofuji could help us find the right person to fix this page. so it is working in all 3 browsers.