The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Question

The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Trying to use Fullpage.js for a website with unique sections on different domains using full-screen iframes. However, encountering issues with scrolling on IOS mobile devices.

The first solution rendered the page completely unscrollable:

<iframe src="http://url.com/" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">

With the second solution, scrolling works briefly but then becomes glitchy:

<style>
.demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>
<body>
<div class="demo-iframe-holder">
<iframe src="http://url.com/">
</div>

Seeking a resolution to this problem. Website in iframe can be accessed here:

html ios css iframe fullpage.js

Answer 1

Answer №1

Resolved by implementing the code below:

<style>
iframe {
    overflow: hidden !important;
    width: 80%;
    height: 90vh;
    border: 1px solid #ccc;
}

div {
    height: 100%;
    width: 80%;
    position: absolute;
}
body {
    margin:10px;
}
@media (max-width: 780px) {
div {
    position:relative;
}
}
</style>

<body>
<div>
    <iframe src="http://www.website.com/">
</div>
</body>

Answer 2

Resolved by implementing the code below:

<style>
iframe {
    overflow: hidden !important;
    width: 80%;
    height: 90vh;
    border: 1px solid #ccc;
}

div {
    height: 100%;
    width: 80%;
    position: absolute;
}
body {
    margin:10px;
}
@media (max-width: 780px) {
div {
    position:relative;
}
}
</style>

<body>
<div>
    <iframe src="http://www.website.com/">
</div>
</body>

The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Answer №1

Similar questions

Tips for altering the background of a video on Vonage

Utilizing Python Selenium to interact with iframes within a webpage, specifically targeting the

Custom HTML structure for WordPress navigation menu - WP Nav Menu

html - Removing excess space following the footer

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

jQuery does not seem to be able to recognize the plus sign (+)

Using jQuery to create a Select All Checkbox that toggles a specific class

The background only partially covers the section

The proper method for incorporating a hover effect using CSS

What is the reason behind the constraints of min/max width and height values preventing the element from fully filling its parent div?

What obstacles must be overcome when developing a CSS framework?

Launch a nearby hyperlink in a separate tab

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

Issue with Child Element Width in CSS3 Not Adhering to Parent Container's Width

Chrome isn't showing the Background Image

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

trouble concerning the responsiveness of a jQuery popup

Is there a way to modify the image source upon clicking a button?

offspring of offspring in jquery animation remains stationary

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?