Scroll issue on iframe in Salesforce Mobile App

Question

When an iframe is displayed on a LWC component or an aura lightning component, added to a pagelayout and viewed in the Salesforce mobile app, I cannot scroll through the page when touching the iframe.

If an iframe fills the whole page, it is impossible to scroll outside the iframe at all. The areas outside the iframes on the other hand, are scrollable.

To be clear: I want to scroll the entire page while touching the iframe. I do not want to scroll inside the iframe.

Things like scrolling="no" or scrolling="false" and css hacks do not work.

Steps to reproduce bug:

• Create a LWC or an aura lightning component.
• Add iframe to component.
• Add component to a pagelayout.
• View in Salesforce mobile app.
• Try to scroll the entire page while touching the iframe.

Code used in LWC:

<template>
  <iframe width="100%" height="300" src="https://www.blank.org"></iframe>
</template>

Code used in Aura Lightning Component:

<aura:component access="GLOBAL" implements="force:appHostable,flexipage:availableForAllPageTypes">
  <iframe width="100%" height="300" src="https://www.blank.org"></iframe>
</aura:component>

It results in the following where both components prevent me from scrolling the page.

Answer 1

So, since I could not find any solutions, I opened a Premier Support Case on Salesforce and they said the scroll issue can be fixed by adding the following css to the iframe:

pointer-events: none;

While this fixes the scrolling issue, I can no longer capture any pointer events inside the iframe (which I need) and Salesforce Support basically told me that they can't do much about it.

If you are looking for work-arounds, you can:

1. Use a canvasApp. However, it doesn't allow dynamic URLs to be used. CanvasApps contain iframes which weirdly have no scrolling issues. If you place a canvasApp in a VFPage, you'll have no scrolling issues there either. It is only if you place the canvasApp in a lightning component/lwc that you suddenly can no longer scroll.

2. Add a padding or margin to the iframe so you can hold onto that to scroll.

Answer 2

There is Scrolling attribute in Iframe

Below is syntax -

<iframe scrolling="auto|yes|no">

The scrolling attribute is not supported in HTML5. Use CSS instead.

Below is Css code -

iframe {
    overflow: scroll;
    width: 600px;
    height: 100px;
    border: 1px solid black;
}

Here is my Playground Link