www.rte.ie - Table data is displayed truncated

[softvision-oana-arbuzov]

URL: https://www.rte.ie/sport/golf/2019/0721/1064321-open-championship-day-4-updates/

Browser / Version: Firefox Nightly 68.0a1 (2019-07-24)
Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Table data is displayed truncated
Steps to Reproduce:
1. Navigate to https://www.rte.ie/sport/golf/2019/0721/1064321-open-championship-day-4-updates/
2. Observe the table data.

Expected Behavior:
All entries from the table are visible.

Actual Behavior:
Last entry from the table is not visible.

Note
1. Not reproducible on Chrome 75.0.3770.80.
2. Screenshot attached.

Affected area:

<tr class="row-usa row-rickie-fowler">
	<td class="player team">
		<span class="position">&nbsp;</span>
		<span class="flag usa"></span>
Rickie Fowler

	</td>
	<td class="score">-5</td>
	<td class="hole">F</td>
	<td class="round">70</td>
	<td class="round">69</td>
	<td class="round">66</td>
	<td class="round">74</td>
	<td class="total">279</td>
</tr>

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

The scores table is inserted through an iframe.

<iframe 
  src="https://www.rte.ie/sport/results/widgets/golf-scoreboard/856746/?limit=7&amp;height=770&amp;iframe=true" 
  allowfullscreen="true" id="iFrameResizer0" 
  style="overflow: hidden; height: 456px;" 
  scrolling="no" 
  width="640" 
  height="90" 
  frameborder="0"></iframe>

The results can be seen on the iframe URL.

The full body of this document is 474.667px high when accessed directly.
The iframe inserted in the document is specified with 456px. setting manually

/* Element | https://www.rte.ie/sport/golf/2019/0721/1064321-open-championship-day-4-updates/ */

#iFrameResizer0 {
  /* height: 456px; */
  height: 474.667px;
}

I get the right layout. I wonder what is adding the style attribute on the iframe.

This is what is sent by in the HTTP response.

<div class="widget-container">
    <p data-embed="rte-sport-results">
        <iframe
            src="https://www.rte.ie/sport/results/widgets/golf-scoreboard/856746/?limit=7&amp;height=770&amp;iframe=true"
            frameborder="0" width="640" height="90" allowfullscreen="true"></iframe>
    </p>
</div>

no style attribute with a a specific height.

in the main html, we get

        var $charts = $('.embed-chart');

        if ($charts.length) {
            $charts.iFrameResize();
        }

        var $widget = $('iframe[src*="eighth-amendment/results/widget"]').add('iframe[src*="elections-2019/results/widget"]');

        if ($widget.length) {
            $widget.iFrameResize();
        }

        var $sportResultsEmbed = $('[data-embed="rte-sport-results"] iframe');
        if ($sportResultsEmbed.length) {
            $sportResultsEmbed.iFrameResize();
        }

so basically $sportResultsEmbed.iFrameResize().

coming probably from

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.min.js" integrity="sha256-xFaHxWAqdY8LendKP243hDmTMIHMb0AYCQ3ZefoiEvo=" crossorigin="anonymous"></script>

The version used is

/*! iFrame Resizer (iframeSizer.min.js ) - v3.6.0 - 2018-03-24
 *  Desc: Force cross domain iframes to size to content.
 *  Requires: iframeResizer.contentWindow.min.js to be loaded into the target frame.
 *  Copyright: (c) 2018 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */

coming from https://github.com/davidjbradshaw/iframe-resizer

Latest release is https://github.com/davidjbradshaw/iframe-resizer/releases/tag/v4.0.4 on March 5, 2019.

That looks like a duplicate of this issue.
davidjbradshaw/iframe-resizer#603
Maybe @davidjbradshaw can help resolve this.

A bit like in #30672 investigated by @wisniewskit I wonder if getBoundingClientRect is behaving differently in Chrome and Firefox.

[karlcow]

fyi in https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.min.js

    function z() {
      var a = document.body.getBoundingClientRect(),
        b = U.iframe.getBoundingClientRect();
      return JSON.stringify({
        iframeHeight: b.height,
        iframeWidth: b.width,
        clientHeight: Math.max(
          document.documentElement.clientHeight,
          window.innerHeight || 0
        ),
        clientWidth: Math.max(
          document.documentElement.clientWidth,
          window.innerWidth || 0
        ),
        offsetTop: parseInt(b.top - a.top, 10),
        offsetLeft: parseInt(b.left - a.left, 10),
        scrollTop: window.pageYOffset,
        scrollLeft: window.pageXOffset
      });
    }

[wisniewskit]

@karlcow, this is where it ultimately gets the initial frame height, in this script:

    getHeight = {
      bodyOffset: function getBodyOffsetHeight() {
        return  document.body.offsetHeight + getComputedStyle('marginTop') + getComputedStyle('marginBottom');
      },

On my machine, in Firefox document.body.offsetHeight = 479px, and in Chrome it's 455px. Those are the final values used to set the height of the iframe by the page.

Oddly, the value of document.body.offsetHeight is too short in Firefox (479px), but document.documentElement.offsetHeight is the value they want (498px).
Chrome gives the same value for both of these (455px). So the page can fix this easily enough by just using documentElement instead.

But I can't tell why the two values don't match up. Even if I drop all of the CSS on the page, the body and html elements of the iframe never match up. This seems to be the root cause of the interop issue, and I'm not sure if it's intentional or a bug. But the site can still fix this by using documentElement, so there's an easy path forward.

[wisniewskit]

I've managed to reduce a test-case here, and have filed bz-1577904 to try to figure out why there's an interop difference here. I'll leave this open though, since there's a fix the site can implement as well.

[softvision-sergiulogigan]

The issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly 68.5a1 (2020-01-08)
Firefox Preview Nightly 200109 (🦎 74.0a1-20200107215758)
Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[softvision-oana-arbuzov]

The issue has been fixed. The table data is fully visible now.

Tested with:
Browser / Version: Firefox Nightly 107.0a1 (🦎 107.0a1-20220920092542)
Operating System: Google Pixel 5 (Android 13) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[inv_38/2022]