#43250 closed defect (bug) (invalid)
Instagram Links in posts are overlapping
Reported by: | 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.
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)
#2
@
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
@
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.
#5
@
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
@
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
@
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
@
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.
#10
@
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
@
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
@
7 years ago
The CSS by @ocean90 and the plugin by @khromov fixed the problem on desktop and mobile views.
#13
@
7 years ago
Happy to confirm that the plugin by @khromov fully resolved the issue for me - thank you
#14
@
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:
↓ 16
@
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
andembeds.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:
↓ 17
@
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:
↓ 18
@
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:
↓ 19
@
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
@
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
@
7 years ago
@matthewmcvickar of course haha. Here you go.
#21
@
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
@
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
@
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:
↓ 25
@
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/
#25
in reply to:
↑ 24
;
follow-up:
↓ 26
@
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
@
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?
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/