www.protagonista.com.co - Embedded instagram content does not fully load

[webcompat-bot]

URL: https://www.protagonista.com.co/actores/el-candente-bikini-con-el-que-kathy-saenz-pone-a-chorrear-la-baba-a-sus-seguidores/

Browser / Version: Firefox Mobile 96.0 Operating System: Android 10 Tested Another Browser: No

Problem type: Design is broken Description: Images not loaded Steps to Reproduce: Instagram embeds don't load only some comments

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220126154723
• channel: release
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false
• hasMarfeel: true

View console log messages

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue using Firefox Focus (Release and Nightly) and on the latest Firefox Fenix Nightly. The embedded Instagram photo does not fully load:

Tested with: Browser / Version: Firefox Focus Release 96.3.0 (360270244 -🦎96.0.3-20220126154723🦎) / Firefox Fenix Nightly 98.0a1(2015860587 -🦎98.0a1-20220130093554🦎)/ Firefox Focus Nightly 98.0 (360310515-🦎98.0a1-20220130093554🦎) Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density) Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Fenix Nightly.
3. Works as expected using Chrome.

Moving this to NeedsDiagnosis for further investigations.

[qa_05/2022]

[denschub]

In Firefox Desktop and in Chrome Mobile, the instagram embed is an actual embed in the form of an <iframe>:

but in Firefox for Android, it's a bunch of empty markup;

The markup shown by Firefox for Android shows is really close to what comes over the wire in the raw HTML, so some JS is failing here. Unfortunately, this is using the official Instagram embed script, no custom magic as far as I can tell. Using the Instagram Embed SDK in a standalone testcase works just fine, so even though this site is using the SDK, there's something wrong with the site, and probably not the SDK...

I wanted to debug this locally, so I downloaded the HTML. While trying to prettify it, prettier kinda exploded, complaining about lots of invalid HTML, inside the Instagram section. And indeed, what they deliver is not what Instagram wants you to use, they stripped out some elements, and they even forgot to close an <a>. Ultimately, this causes the Instagram JS to fail (it's unable to find some elements), and Chrome just so happend to "fix" the HTML in a slightly different way.

It's not reasonable to expect all browsers to "fix" invalid HTML the same way, so this is clearly a site issue. I'll reach out...