I have set up an iFrame to display a multi-page document, but I am facing an issue where the content is static and does not scroll on iPhone devices. Below is the code snippet I am using:
return (
<div className="policyViewDocumentContainer">
<AccountFlowHeader guid={guid} history={history} handleSignOut={this.handleSignOut} />
<p className="policyViewInternalHeader">
Card
</p>
<hr />
<div className="policyViewDocumentInnerContainer">
<object
title="Policy Document"
data={`https://agency.${env}api.endpoint.com/agency/policyNumber/${contractNum}`}
type="application/pdf"
style={{
width: '100%',
minHeight: 'calc(100vh - 130px',
}}
>
<embed
src={`https://agency.${env}api.endpoint.com/buckle/policyNumber/${contractNum}`}
type="application/pdf"
/>
</object>
<div />
</div>
</div>
);
}
}
This code snippet only covers the render method. I suspect that I may need to make some adjustments related to webkit styling to enable scrolling properly in Safari on iPhone.