Inline frames and the iPhone X

When I want to create a prototype based on the iPhone I usually use an inline frame to display it in the phone mockup for desktop users, while allowing phone users to browse the structure directly.

However, the corners of the iPhone X present a problem - the inline frame needs to sit behind the iPhone frame. Layered that way you can’t interact with the prototype.

Anyone have any smart solutions to the problem?

iPhone X8 Model.rp (71.2 KB)

Hi!

Using a little javascript in your OnPageLoad handler (in the “Link to external URL or file” box of the Open Link in Current Window command), you can make the phone image - here called “myPhoneMask” - essentially invisible to mouse actions.

javascript:
$("[data-label='myPhoneMask']").css("pointer-events","none");
void(0);

The downside is this probably doesn’t work in IE, but if you can control your environment, this solution works.

Live sample.

File: div-click-through.rp (67.8 KB)

3 Likes

Thanks, that works perfectly.