Facebook Embedded Posts seems to have an issue on iPads using Safari or Chrome. If there is only one picture or video in the Facebook post, the picture slowly grows up to a certain width and destroys the complete layout.
The code example to reproduce this behaviour is pretty simple and also based on the latest Facebook documentation:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/Boulderplanet/photos/a.618483228200641.1073741838.148729438509358/620103224705308/?type=1" data-width="666"></div>
</body>
</html>
You can also find an example here: http://beta.climbster.net/fb_feed
Can please somebody help us to clarify this issue? As Chrome on Android tablets as well as Chrome and Safari on iPhones do not have this issue, I am currently guessing it is a Facebook defect with the iFrame.
There is also no difference if the data-width parameter is set or not, neither wrapping the Facebook div in an own div with a fixed width is stopping the picture from continuously growing.
Thank you!
I have filed this bug at Facebook and after check from their side it was accepted as valid bug.
see link
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With