Issue with iOS iframe scrolling - unable to scroll as expected

On iOS devices like the iPad and iPhone 6, scrolling doesn't seem to work as intended. Instead of the iframe scrolling, it's the 'body' that is moving.

Javascript

$(document).on(clickHandler, '#content a', function(){
 href = $(this).attr("title");
 $("#iframeContainer div").append(
  $("<iframe />")
  .attr("src", href)
 )
 $("#iframeContainer").fadeIn();
});

CSS

#iframeContainer {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 background-color: rgba(0,0,0,0.5);
}

#iframeContainer div {
 position: fixed;
 left: 5%;
 top: 5%;
 width: 90%;
 height: 90%;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch
}

#iframeContainer div iframe {
 width: 100%;
 height: 100%
}

HTML

<div id="iframeContainer">
 <div></div>
</div>
javascriptjqueryhtmlcssiframe

Answer №1

Success! The CSS configurations did the trick.

#iframeContainer {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.closeIframe {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    line-height: 50px;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9)
}

.closeIframe span {
    font-size: 22px;
    color: #ffffff;
    cursor: pointer
}

#iframeContainer .innerContainer {
    position: absolute;
    top: 50px;
    left: 0;
    padding-bottom: 50px;
    width: 100%;
    height: 100%;
    background: url('../images/loading.svg') center center no-repeat #ffffff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

#iframeContainer .innerContainer iframe {
    border: none;
    width: 100%;
    height: 100%
}

Answer №2

To solve the issue, simply include overflow: hidden; in your html and body tags. For instance, you can use width: 90vw; and height: 80vh; to determine the screen width and height rather than the container size.

html,body {
  overflow: hidden;
  height: 100%;
}

#content {
  width: 90vw;
  height: 80vh;
  overflow: auto;
  background: lightblue;
}

#scroll-fake {
  width: 50%;
  height: 150%;
  background: pink;
}
<body>
  <div id="content">
    <div id="scroll-fake"></div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS and JavaScript to create a gradient-style opacity effect for smoothly fading out content

Is there a way to achieve a gradient fade effect on the opacity of an iframe and its content? To provide an illustration, think of the bottom of the notification centre in Mountain Lion or iOS. The concept involves having the content within an iframe grad ...

cssiframescrollopacitygradient

Template displaying multiple polymer variables side by side

Here is the date object I am working with: date = { day: '05' } When I use this code: <div>{{date.day}}</div> It generates the following HTML output: <div>05</div> Everything looks good so far. Now, I want to try th ...

javascriptpolymermustache

Using JavaScript variables within an @if statement in Laravel within the innerHTML segment

How can I incorporate a JavaScript variable 'x' into an @if statement in Laravel? I have tried placing it both inside and outside of the @if statement. When placed outside, it works perfectly fine, but I really need to perform an action based on ...

javascriptphplaravel

Strategies for Synchronizing Multiple Asynchronous Calls in NodeJS

I have a function getAliasesByRoleDetailed(role) that is responsible for retrieving user data based on a given role. This particular function utilizes axios to fetch the necessary data. The result obtained from executing this function appears in the follo ...

javascriptnode.jsasynchronousasync-await

Targeting and individually moving specific jQuery elements one at a time

I have a structure in my HTML that looks like this: <tr class="v65-productDisplay-row"></tr> <tr class="v65-productDisplay-row PriceAndButton"></tr> <tr class="v65-productDisplay-row PhotoLine"></tr> <tr class="v65-p ...

jqueryindexinginsertafter

jquery modal not displaying

My page is designed to display a dialog containing a set of guidelines using a PHP script that determines which guideline(s) should be shown and generates the corresponding div element(s). Afterwards, I utilize a simple $(document).ready( function() { $(" ...

jqueryhtmldialog

Encountering the "excessive re-renders" issue when transferring data through React Context

React Context i18n Implementation i18n .use(initReactI18next) // passes i18n down to react-i18next .init({ resources: { en: { translation: translationsEn }, bn: { translation: translationsBn }, }, lng: "bn ...

javascriptreactjsreact-contexti18next

Highcharts - resolving cross-browser e.Offset discrepancies in mouse event detection on charts

I need to determine if the mouseup event is inside the chart and display the coordinates of the point. The code works in Chrome but not in Firefox due to the lack of the event.offset property. jQuery(chart.container).mouseup(function (event) { eoff ...

javascripthighchartsjquery

Switching the default browser for npm live-server

When I use the npm live-server package to preview my website as it changes, it keeps opening in Edge even though Chrome is set as my default browser on my system. I attempted to use the command suggested on the npm website: live-server --browser=chrome H ...

javascripthtmlcssnpmnpm-live-server

How can we include identical item names within a single JavaScript object?

My attempt at achieving the desired result involves creating an object like this: var obj = {id: id, items: "asdf", items: "sdff", test: varTest}; However, I face a challenge where I need to dynamically add two elements with the same name 'items&apo ...

javascriptjqueryjsonobject

RegEx in JavaScript to identify and match the innerHTML property of all elements

I am currently in the process of developing a Chrome extension that needs to identify specific pages within a website, including the Log In / Sign In page, the Sign Up / Register page, the About page, and the Contact Us page. My approach involves obtainin ...

javascriptregexgoogle-chrome-extension

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

How can I determine the user's time zone and location in order to generate a server-side page tailored to their specific location and time zone? I am struggling to retrieve the user's IP address from the request or the localhost IP address (127.0 ...

javascriptnode.jsreactjsexpressnext.js

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml

Keeping track of important dates is ineffective using the calendar

I am facing an issue with developing a calendar that marks events on the correct dates. I am receiving the dates in the following format in PHP [ { "status": "OK", "statusCode": 200, "statusMensagem": & ...

javascriptphptypescriptreact-nativeexpo

What are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

javascriptcssintro.js

Random Exclamation Point Appears in Outcome of PHP HTML-Email

I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...

htmlemailphp

gathering information from a group of items and organizing them into a fresh set of items

I have a collection of objects called Lines nestled within the rows array, which is nested within the tabs array. My goal is to extract specific data from the lines array and transfer them into a new array named 'colors'. This is how the initial ...

javascriptvue.js

Utilization of Bootstrap's .container class in various scenarios

As I delve into Bootstrap, the usage of the .container class is provoking some confusion. Most tutorials suggest a structure like this: -.container --.row ---.col- ---.col- However, I came across a different approach in a W3schools example: W3Schools - ...

htmlcsstwitter-bootstrap

A guide on invoking a web method from an aspx.vb page in VB.net

My goal is to call a WebMethod from my aspx.vb file. Below is the syntax of my WebMethod located in Default.aspx.vb: <System.Web.Services.WebMethod()> _ <ScriptMethod(UseHttpGet:=True, ResponseFormat=ResponseFormat.Json)> _ Public Shared Funct ...

javascriptjqueryasp.netvb.net

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

javascriptcssangulartypescriptangular-material