Scrolling problems with embedded iframe

[Kloees]

Hello Will,

I have an I frame as my cover image, but it doesn’t seem to allow users to scroll the page. Im allowed to scroll when using safari on my mac, but safari on my iPad does not allow me to scroll…

Site is: rotoimage.Webflow.com

[thewonglv (William Wong)]

Hi @Kloees, Can you please update your post following these guidelines: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance

[Kloees]

Sorry!

Alright, so my read-only link: https://preview.webflow.com/preview/rotoimage?preview=114fa31ba8b1349481e9075c165affc3

Browser being used to create website: Safari 7

This is the code I am using in the embed window:

.Flexible-container { position: relative; padding-bottom: 38%; padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

So basically the problem is occurring on every device aside from my own (macbook pro with Safari 7).

[Kloees]

Code didn’t copy… here it is again:

@Kloees

This is the code I am using in the embed window:
<style>

.Flexible-container {
position: relative;
padding-bottom: 38%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

</style>

<div class=“Flexible-container”>

<iframe width=“425” height=“350” frameborder=“0” scrolling=“no” marginheight=“0” marginwidth=“0” src=“http://imagecreate3d.com/Logo%20Banner/output/ROTO%20LOGO%20PRESENTATION”></iframe>

</div>

So basically the problem is occurring on every device aside from my own (macbook pro with Safari 7).

[thewonglv (William Wong)]

Hi @Kloees, try adding

.Flexible-container {pointer-events:none;}

to your embed code and see if that helps. This should prevent any click options on the embed element allowing you to tap and scroll down your web-page.

More info here: pointer-events | CSS-Tricks - CSS-Tricks

I hope this helps. If not, please let me know – I’m happy to assist further!

[Kloees]

This definitely helps!

Although I still want click/tap to be enabled. Only scroll disabled. Is this at all possible?