iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ...">
  <iframe style="height: 600px, ...">
  </iframe>
</div>

The height of the iframe is currently set to screen.availHeight, and it remains the same even when the orientation changes.

If the modal is opened in portrait mode or landscape mode, everything works perfectly. However, if the modal is opened in portrait mode and then rotated into landscape mode, the scrolling functionality stops working correctly. Instead of scrolling within the modal, you end up scrolling the underlying page.

This issue occurs despite the fact that the styling for the iframe remains consistent regardless of orientation. Has anyone encountered this problem before? Are there any solutions or workarounds available? As someone new to this, I would appreciate any guidance or advice.

javascriptioscssiphoneiframe

Answer №1

var adjustLayoutOnOrientationChange = function() {
    switch (window.orientation) {
        case -90:
        case 90:
            console.log('landscape');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal').scrollTop(1);
            }
            break;
        default:
            console.log('portrait');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal.in').css('overflow', 'hidden');
                setTimeout(function() {
                    $('.modal.in').css('overflow-x', 'hidden').css('overflow-y', 'auto');
                }, 10);
            }
            break;
    }
};

window.addEventListener('orientationchange', adjustLayoutOnOrientationChange);

adjustLayoutOnOrientationChange();

This issue was resolved using the following method

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

In search of a render function that can effectively apply styles to HTML strings using React JS

I have been struggling to convert the result field value, including HTML attributes string, into respective styles for one column in my antd table. Below is the string I am trying to convert: The exhaust air requirements for fume hoods will be based on m ...

javascripthtmlreactjsecmascript-6antd

Updating the Hero Image

Scenario: In my project directory, under Product -> src -> static -> ostatic [ there are two folders named css and images ] -> images -> where all the images can be found. I am using bootstrap and attempting to set a background-image for j ...

cssdjango

Receiving the latest global variable in JavaScript using jQuery

I keep receiving undefined type for: $(".ui-slider-handle").attr("title", '"'+current+'"'); Even though I can successfully alert the updated value of current on line 29, it seems to not be working with .at ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Unraveling the Mysteries of AngularJS in a Tutorial Snippet

After reading through the enlightening theory snippets in Step 3 of AngularJS Tutorial, one particular passage piqued my curiosity: The scope, which connects our controller and template to create a dynamic view, is not isolated within its own bounda ...

javascriptangularjsinheritancescope

How to retrieve a string value from an object in Express.Js by using the key value pair

I'm wondering about the proper way to retrieve a value from an object where the key value is a string. This involves sending data from the client side and receiving it on the backend using express.js. Example of data sent from the client side: var ...

javascriptnode.jsexpress

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...

javascripthtmlreactjsmaterial-uiaccessibility

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

javascriptreactjstypescriptenumsmapping

Revamp the HTML table with JavaScript headers

I imported data from a CSV file into an HTML table and here is how it appears: <div id="myTable" style="-ms-overflow-x: auto;"> <table> <tbody> <tr class="rownum-0"> <td>Make</td> ...

javascriptjqueryhtmlcsv

Rule for jQuery validation based on variables

I am facing an issue with validation of login asynchronously in my HTML form using the jQuery Validation Plugin. I would like to trigger a request for login validity on blur, and validate it upon receiving a response. Below is the code snippet: var login ...

javascriptjqueryvalidationasynchronous

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

My goal is to update a state by submitting a value through a button click. Everything works perfectly when using the HTML input element. However, when I switch to the Material UI RaisedButton, the value isn't passed at all. Can someone help me identif ...

javascriptreactjsonclickmaterial-ui

Struggling to make an AJAX form function properly

I'm running into an issue while setting up a basic AJAX form. My goal is to have a message display on the same page upon successful login using a PHP form through AJAX, but currently, I get redirected to the PHP file after form submission. Can anyone ...

javascriptphpjqueryhtmlajax

The Reactjs infinite scroll feature continuously displays fresh data

Every time I scroll, my data is always rendering on page 2 and page 1 disappears, and the items.concat function is not working properly. My fetch data code looks like this: const FetchUrl = async (p) =>{ const Url = await fetch(`api-link=${p}`); ...

javascriptarraysreactjsconcatenationnext.js

Having difficulty controlling the DOM using cheerio in a Node.js environment

I am currently working on a basic program using Node for the server side with cheerio. Here are the code snippets provided: Server Side: /** * Module dependencies. */ var express = require('express') , routes = require('./routes') ...

javascripthtmlnode.jscheerio

What are the steps to showcase a webcam stream in GLSL by leveraging Three.js?

One method of displaying a webcam video using ThreeJS involves creating a video texture, as shown below: video = document.getElementById( 'video' ); const texture = new THREE.VideoTexture( video ); texture.colorSpace = THREE.SRGBColorSpace; const ...

javascriptthree.jsglslshaderwebgl

Is there a way to turn off step navigation in bootstrap?

Displayed below is a visual representation of the bootstrap step navigation component. Presently, there is an unseen 'next' button located at the bottom of the page. When this 'next' button is pressed, it transitions from 'step-1 ...

javascriptjqueryhtmlcsstwitter-bootstrap

Serve an image in Node.js from a location outside of the public folder

Is there a way to display an image that is located outside of the public folder in my webroot? Here is my directory structure: Webroot --core ----views ----public <- Stylesheets and other images are stored here ------index.ejs <- I want to display f ...

javascriptnode.jsexpressejs

Ways to retrieve information when text is modified and a dropdown is selected within an input field

I have an input field with a text box and a dropdown. My goal is to trigger data based on text changes in one method, while using another method for the dropdown. Check out the code below. const allList = [ { id: "1", value: "Fruits" ...

javascriptreactjsbootstrap-4

Unable to set a new value for the "preferredDisplayMode" property in SplitView

In my app, I have implemented multiple UISplitViewControllers, each with its own MasterView and DetailView. However, I noticed that upon launching directly into a SplitView, the DetailView is presented first, requiring me to navigate back to the MasterView ...

iosswiftuisplitviewcontroller

Fetch information from MySQL, create a new row for each data entry

Currently, I am working on a project for my school that involves retrieving student works from a database. For the homepage of my project, I have set up 10 divs to hold the data returned from a query. The reason I preset these divs is because I only need ...

javascriptphpjqueryhtmlmysql

Showing outcomes by making rapid consecutive AJAX requests

If you need a visual representation, I have a PHP script for a Hotel Management application that showcases a calendar (with columns representing days of the month and rows displaying prices per day). This script can be accessed in edit mode, where it gene ...

phpjavascriptajax