codepen.io - The text is not highlighted correctly

[danielschneider22]

URL: https://codepen.io/danielunstack/pen/zYJGrKo?editors=1111

Browser / Version: Firefox 109.0
Operating System: Mac OS X 10.15
Tested Another Browser: No

Problem type: Something else
Description: Firefox Release 109.0.1 Causing Iframe Issue
Steps to Reproduce:
Discrepancy between last version of Firefox and the latest version

1. Install Firefox version 108.0.2
2. Go to https://codepen.io/danielunstack/pen/zYJGrKo?editors=1111.
3. View the console output. The div element within the iframe is classified as an HTMLElement
4. Upgrade Firefox to version 109.0.1
5. Go to https://codepen.io/danielunstack/pen/zYJGrKo?editors=1111.
6. View the console output. The div element within the iframe is NOT classified as an HTMLElement

This discrepancy is causing production issues for us.

Thanks!

Browser Configuration

• None

From webcompat.com with ❤️

[sv-calin]

Thanks for the report. Is this the message from the console are you reffering to?

[inv_07/2023]

[danielschneider22]

Excellent point! My example was a poor reflection of the problem faced as it looks the same in chrome and firefox.

The true issue stems from elements added to the top level document, but that are placed as children within the iframe. It looks like these are treated differently in the latest firefox vs chrome and older versions of firefox.

I've updated my codepen to show this and am showing a screenshot below of chrome, firefox 108.02, and the latest version of firefox.

In older versions of firefox and chrome, elements added are HTMLElements. In the latest firefox versions elements are not HTMLElements.

View the screenshot

[sv-calin]

I was able to reproduce this issue on Windows 10 as well.

Tested on:
• Browser / Version: Firefox Nightly 112.0a1 (2023-02-19) / Firefox Release 110 / Chrome 110.0.5481.100
• Operating System: Windows 10

Notes:

1. Reproducible on both Firefox Release and Nightly
2. Not reproducible on Chrome

Moving to Needsdiagnosis.

[inv_08/2023]

[danielschneider22]

Hey @sv-calin , any update on this? This is still causing production issues for our team.

[sv-calin]

I'm sorry but there are not updates at the moment, this is still under investigation.

[inv_10/2023]

[danielschneider22]

No worries, appreciate the update that it’s still being investigated

[ksy36]

This is related to https://bugzilla.mozilla.org/show_bug.cgi?id=1769620 and the changes made in https://bugzilla.mozilla.org/show_bug.cgi?id=1360715.

I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1821790 for further investigation. There seems to be a difference in instanceof behaviour when used in an iframe in Firefox vs Chrome since 1360715 was shipped.

It returns false in Firefox when instanceof HTMLElement is called as the @danielschneider22 mentioned. And returns true when the iframe window (instanceof iframe.contentWindow.HTMLElement) checked instead. The results in Chrome are exact opposite.

@danielschneider22 while this is being investigated, wonder if applying instanceof iframe.contentWindow.HTMLElement could possibly help as a temporary solution?

So it will be something like:

if( el2 instanceof HTMLElement || el2 instanceof iframe.contentWindow.HTMLElement){

[danielschneider22]

Yup, good call! That’s a great workaround, but it’s unfortunately a problem in one of node packages we are importing which makes it trickier to implement that solution.

Thanks for the update here though

[ksy36]

@danielschneider22 thanks for the update. Wonder which node package are you using? Just trying to understand how widespread this issue is.

[danielschneider22]

The node package we are using that is creating issues is quill.js. https://quilljs.com/

[ksy36]

@danielschneider22 Thanks for your response. I've tried to create a test case using an iframe with quill js locally, and it seems to be working fine. But I imagine your usecase is more complex than that. Wonder if you could possibly provide a testcase with quill js included? That would help us with prioritizing the issue.

(For my test case I used this example code from quill documentation site locally in an iframe).

A bit more context from investigation in comment 3:

Before v. 109 instanceof behavior returned true regardless of the realm the object is from (i.e. regardless whether it's in an iframe). So from the testcase provided here both of these returned true:

    `el2 instanceof HTMLElement` > true
    `el2 instanceof iframe.contentWindow.HTMLElement` > true

To match other browsers this has been changed in 1360715 to take into account the current realm, so it results in:

    `el2 instanceof HTMLElement` > true
    `el2 instanceof iframe.contentWindow.HTMLElement` > false

(given that el2 is created with document.createElement("div") and not iframe.contentWindow.document.createElement).

It matches in all browsers to this point, however once this element is appended with el.appendChild(el2) it changes the appended node prototype in Firefox:

    `el2 instanceof HTMLElement >  false`
    `el2 instanceof iframe.contentWindow.HTMLElement >  true`

In Chrome it remains the same:

    `el2 instanceof HTMLElement >  true`
    `el2 instanceof iframe.contentWindow.HTMLElement >  false`

So this compatibility issue has been around for some time and tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1470017. It's related to node adoption and not instanceof behavior, but only surfaced after 1360715 was shipped.