Mobile safari loading responsive version of certain sites inside iframe - css

Question

I have a rails app that's loading external websites (mostly articles) inside an iframe. And I've gotten the majority of the articles to be responsive on any device. I'm only having trouble with articles from certain websites on mobile Safari.
Examples:
1. http://vyrtex-staging.herokuapp.com/article/what-went-wrong-in-flint
2. http://vyrtex-staging.herokuapp.com/article/built-on-passion-how-vox-media-grew-from-its-roots-as-an-oakland-a-s-blog-into-one-of-the-internet-s-biggest-publishers
3. http://vyrtex-staging.herokuapp.com/article/why-isn-t-america-paying-attention-to-trevor-noah
Here is what each of those look on mobile safari:
1. http://i.imgur.com/UAsiJD3.jpg
2. http://i.imgur.com/QgYiOsp.jpg
3. http://i.imgur.com/4wg8y9w.jpg
They look completely fine on desktop Safari, and desktop/mobile Chrome — only mobile Safari is the issue.
Here's my CSS:
.body_container {
width:100%;
height: 100vh;
padding-top:5px;
position: relative;
background-color: white;
}
.intrinsic-container {
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Here's my HTML:
<div class="body_container">
<div class="intrinsic-container">
<iframe src="<%= #article.url %>"></iframe>
</div>
</div>
And here the javascript I'm running to keep the iframe responsive (the iframe itself, not necessarily the content inside of it):
<script>
var $iframes = $( "iframe" );
// Find & save the aspect ratio for all iframes
$(".intrinsic-container").each(function () {
$( this ).data( "ratio", this.height / this.width )
// Remove the hardcoded width & height attributes
.removeAttr( "width" )
.removeAttr( "height" );
});
$(document).ready( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("#navbar").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("header").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
// Resize to fix all iframes on page load.
}).resize();
</script>
I'm guessing this is probably a CSS issue, where I have to add some webkit stuff to make sure the content inside the iframe loads responsively. Any thoughts on how I can fix this?