Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#43250 closed defect (bug) (invalid)

Instagram Links in posts are overlapping

Reported by: jimgrant's profile jimgrant Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.9.4
Component: Embeds Keywords:
Focuses: Cc:

Description

Since the latest update 4.9.4 Instagram links in a post are not displaying properly, they are all overlapping and covering each other.

http://test.tybs.com/903-2/

Even on a clean install with no plugins and 2017 theme.

Existing posts already saved are not showing this behavior:

http://blog.sidebysidestuff.com/top-10-instagram-video-clips-from-december010218/

The format is simple, just a list of Instagram links with some text in between.

Change History (26)

#1 @jimgrant
7 years ago

Additional link, new posts are showing this behavior. Here is the post that alerted us to the issue:

http://blog.sidebysidestuff.com/top-10-instagram-pics-january/

#2 @sgatz
7 years ago

  • Severity changed from normal to major

We are seeing this bug as well: https://www.queerty.com/proprioception-10-insanely-hot-fitness-tips-instagrammers-know-20180207

and Mark Fletcher reported it on his blog (password: reddit) - http://markfletcher.co/2018/02/test/

All are showing the same behaviour, the first embed appears correctly, but then the following ones show up as overlapping.

#3 @frogonastring
7 years ago

I am the Mark Fletcher mentioned in @sgatz comment.
I first observed this on 4.9.3 on February 5th.

As described above, existing working posts are not affected but all new posts are affected. One or two images display correctly then the remainder overlap.

From my investigations, it seems that the iframe embed code is being incorrectly loaded after a certain point.

I've tested this on my own custom theme, a few random ones from the theme library, 2015, 2016 and 2017 and it exists in them all.

#4 @SergeyBiryukov
7 years ago

  • Component changed from General to Embeds

#5 @ocean90
7 years ago

  • Severity changed from major to normal

This seems to be a bug with Instagram's embed code. For some reason it's using absolute positioning for the iframe on your sites. Couldn't reproduce it on one of my sites.

As a workaround you can use this CSS. Add it through customizer's Custom CSS or your theme's stylesheet.

iframe.instagram-media {
    position: static !important;
}

#6 @chetan200891
7 years ago

@jimgrant I have just tested on my development site with twentyseventeen theme. It's works fine, I am not getting position: absolute; css as compare to your site.

#7 @jimgrant
7 years ago

Tried that CSS on the site, seems appears to fix the issue.
http://blog.sidebysidestuff.com/top-10-instagram-pics-january/

Curious though if it is an Instagram issue if the only action in the CMS is to place the link, isn't it in the way WordPress is rendering it or does WordPress pull code from Instagram when it sees a link?

#8 @sgatz
7 years ago

Thanks @ocean90 - your workaround works for us too. It still is an issue for Instagram to fix, but at least it's resolved here.

#9 @newsbee
7 years ago

I have the same problem.

#10 @johnbillion
7 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

This is an issue with Instagram. WordPress only pulls the embed code from Instagram and doesn't control the layout of its embeds.

#11 @khromov
7 years ago

In case anyone needs a workaround until Instagram fixes this issue, feel free to use this snippet:
https://gist.github.com/khromov/3f0c20e076019b5b11f979caae2b35f5

#12 @webbasica
7 years ago

The CSS by @ocean90 and the plugin by @khromov fixed the problem on desktop and mobile views.

Last edited 7 years ago by webbasica (previous) (diff)

#13 @frogonastring
7 years ago

Happy to confirm that the plugin by @khromov fully resolved the issue for me - thank you

#14 @brittantley
7 years ago

With the .php code provided by @khromov can this simply be placed in my top-level directory or must the code be invoked from somewhere?

#15 follow-up: @khromov
7 years ago

@brittantley It's a self-contained plugin, so you can save it as a file with any name in your wp-content/plugins directory, for example /wp-content/plugins/fix-instagram-oembed.php and then activate it through your admin control panel.

Some more background of the problem:
It seems to be multiple (possibly related) issues:

  • Instagram oEmbeds return different javascript script tags, and it seems arbitrary, the two I've seen and that the snippets attempts to fix are are:
    • instagram.com/embed.js
    • platform.instagram.com/<locale>/embeds.js
  • embed.js and embeds.js cause javascript errors when enqueued simultaneously.
  • embeds.js seems to cause javascript errors by itself when enqueued multiple times.

The HTML markup does not differ. My workaround gist posted earlier detects when multiple Instagram embeds are enqueued, strips the script tags for each individual embed and then adds one call to instagram.com/embed.js in the footer, which is the script that seems to work reliably.

The @ocean90 fix works by fixing the CSS to make the post appear expanded, so it works on a slightly different level. Both can be combined without issues.

#16 in reply to: ↑ 15 ; follow-up: @brittantley
7 years ago

Thanks for the clarification @khromov. Unfortunately all combinations of your plugin and the CSS from @ocean90 are not working for me. The Instagram posts erratically work correctly and then do not work in an article that has ~8 embedded images. I can't figure out what does or does not work as the behavior is different every time I preview an article. Hopefully Instagram fixes this issue soon.

#17 in reply to: ↑ 16 ; follow-up: @matthewmcvickar
7 years ago

@brittantley If you can provide a link to the site where it's not working or your source code, we may be able to help diagnose this. Can you send a link?

#18 in reply to: ↑ 17 ; follow-up: @brittantley
7 years ago

@matthewmcvickar Here it is. I currently don't have the modified CSS, but I do have @khromov's plugin enabled. The behavior appears to be erratic: some embeds will randomly work once when the page is loaded while others overlap, and the next rendering of the page will have different behavior.

#19 in reply to: ↑ 18 @matthewmcvickar
7 years ago

@brittantley That's a preview link for an unpublished post; I can't see it because I'm not logged in to your WordPress admin. You'll have to publish the post in order for me to see it.

#20 @brittantley
7 years ago

@matthewmcvickar of course haha. Here you go.

#21 @matthewmcvickar
7 years ago

@brittantley From looking at the source code, it seems the plugin isn’t having any effect on the Instagram embed. Please try disabling that plugin and instead using the CSS workaround. The CSS workaround worked for my site, and worked when I applied it to your site using my browser's developer tools to inject new CSS. Can you add this CSS to your style.css file and see if it works?

iframe.instagram-media {
    position: static !important;
}

#22 @khromov
7 years ago

@brittantley It looks like the embed isn't being filtered by the embed_oembed_html filter in my workaround snippet. I'm not sure what causes that, perhaps some sort of caching plugin.

#23 @brittantley
7 years ago

@matthewmcvickar looks like that fixed it! After dealing with some annoying caching issues, my updated style.css is finally rendering everything correctly. Thanks for the help!

#24 follow-up: @sebastienonillon
7 years ago

I have the same issue. Some Instagram embeds are overlapping in posts and some aren't displaying at all. I tried both workarounds (the plugin and the CSS) but they don't seem to have any impact. I disabled the cache plugin (WP-Rocket) before testing.

Any thoughts? Here's a post example: https://passed.fr/vestiaire/joue-la-comme-hidetoshi-nakata/

Last edited 7 years ago by sebastienonillon (previous) (diff)

#25 in reply to: ↑ 24 ; follow-up: @frogonastring
7 years ago

Replying to sebastienonillon:

Any thoughts? Here's a post example: https://passed.fr/vestiaire/joue-la-comme-hidetoshi-nakata/

Your post displays fine to me - I can't see the issue being exhibited on the above page.

#26 in reply to: ↑ 25 @sebastienonillon
7 years ago

Replying to frogonastring:

Replying to sebastienonillon:

Any thoughts? Here's a post example: https://passed.fr/vestiaire/joue-la-comme-hidetoshi-nakata/

Your post displays fine to me - I can't see the issue being exhibited on the above page.

Thanks for your reply! The Instagram embeds don't appear at all anymore on this page on my end. I have tested on Chrome 66 incognito without extensions. Do the embeds appear on your end?

Note: See TracTickets for help on using tickets.