After an orientation change event, the window.innerWidth property is behaving unexpectedly in Chrome iOS version 87.0.4280.77

After an orientation change event on Chrome iOS 87.0.4280.77, the window.innerWidth appears to be incorrect. Initially, the innerWidth is 414px when viewed on an iPhone. However, after changing the phone's orientation from landscape to portrait, the innerWidth decreases to 326px.

I have also cross-checked the innerwidth using and found that it reflects the same innerWidth values as in my code.

View before the orientation change

View after changing to landscape and back to portrait

<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>

<script type="text/javascript">
    alert("innerWidth1:"+window.innerWidth);  // initial innerwidth before orientation change

    window.addEventListener('orientationchange', function() {
        alert("innerWidth2:"+window.innerWidth);  // innerwidth after orientation change
    });

</script>

</body>
</html>

Has anyone else faced a similar issue? Any insights would be appreciated.

Thank you.

Answer №1

Upon running the orientationChange function, it appears that the window.innerWidth reading remains unchanged. However, if a timeout is set and the value is read again, it reflects the anticipated change.

Try adjusting the Pause in this code snippet to observe the impact. Interestingly, even a pause as short as 0ms (tested on Safari with IOS14.2 on iPad) prompts a reevaluation of innerWidth.

I have attempted to locate official documentation explaining this behavior without success. It seems like the system needs to 'repaint' the window to determine the accurate innerWidth. As a workaround, adding a setTimeout with a slight delay (e.g., 1ms instead of 0ms to cater for potential discrepancies across different systems) seemed effective. Additionally, using requestAnimationFrame did not yield the correct width.

    <html>
    <head>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    </head>
    <body>
    <div id="info"></div>
    Pause: <button onclick="pause = 10000">10000</button>  <button onclick="pause = 10">10</button>  <button onclick="pause = 0">0</button>
    <script type="text/javascript">
        const info = document.getElementById('info');
        let pause = 10000; //number of ms to wait before reading innerHeight again
        
        info.innerHTML = "innerWidth1:"+window.innerWidth;  // initial innerwidth prior to orientation change

        window.addEventListener('orientationchange', function() {
            info.style.color = 'red';
            info.innerHTML = "innerWidth on orientation change before pause:"+window.innerWidth;
            setTimeout(function() {info.style.color = 'blue';
                info.innerHTML = "innerWidth after orientation change and a pause of: " + pause + 'ms ' + window.innerWidth}, pause);  // innerwidth after orientation change
               });

    </script>

    </body>
    </html>

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

Setting a completion flag using a factory in AngularJS

I'm struggling to create a factory that can set a completion flag for a value within an object. The object in question looks like this: {"key1":"value1", "key2":"value2", "key3":"value3"} My goal is to retrieve and operate on the value associated wi ...

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

Is there a method in JavaScript to prevent href="#" from causing a page refresh? This pertains to nyroModal

Is there a way to prevent <herf="#"> from causing a page refresh? I am currently working on improving an older .NET web project that utilizes nyroModal jQuery for displaying lightboxes. However, when I attempt to close the lightbox, nyroMo ...

Every time I attempt to execute this piece of code in "node.js", an error pops up

const express = require('express'); const request = require('request'); const bodyParser = require('body-parser'); const https = require('https'); const app = express(); app.use(express.static('public')); ...

Incorporate React JS seamlessly into your current webpage

As I delve into learning React and considering migrating existing applications to React, my goal is to incorporate a React component within an established page that already contains its own HTML and JavaScript - similar to how KnockoutJS's `applyBindi ...

Is there a way to instruct Google to include my site in its index using Angular.js?

I am currently working on an angular.js app and have been following Google's guide for ajax-based applications. Here are the steps I have taken: Added meta tags <base href="/"> <meta name="fragment" content="!"> Configured angular.js ...

Troubden array filtration in Angular is malfunctioning

I recently developed an angular "filter component" intended to filter an array and display its contents. The keyword used to filter the array, value, is obtained from another component through a service. While the HTML displays both the value and the entir ...

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

The command "driver.navigate().to("url")" seems to be malfunctioning with Chrome 64 and driver version 2.35 for Chrome

I'm not sure what's going on. All of a sudden, my test step is failing. public void gotoRolePage() { driver.navigate().to("url"); } public void gotoRolePage() { driver.get("url"); } Starting ChromeDriver 2.34.522940 (1a76f96f66e3ca ...

What is the best approach for storing data locally using coredata, and then syncing it with the API when network connectivity is available?

Is there a way to store data offline using CoreData, and then sync that data with an API once the network connection is restored? Below is the code snippet for saving the data locally: func savePersonalInfo(customerId: String, productId: String, createdB ...

What is the best way to trigger an ajax request when a user selects a tab?

How can I trigger an ajax call when a tab is clicked by the user? What is the best way to handle the HTML response and display it within the tab? How do I bind JavaScript events to the dynamically loaded HTML content? I am familiar with using jQueryUI tab ...

Determine the number of distinct elements in fields using MongoDB aggregation

After executing my query, I received documents in the following format: { _id: '48nmqsyxmswpkkded2ac_331fabf34fcd3935', actions: { sales: { pixel: [Object] } }, date: Sun Jul 27 2014 00:00:00 GMT-0400 (EDT), client: '48nmqsyxmswpkkded ...

Exploring MongoDB's Aggregation Framework: Finding the Mean

Is there a way to use the Aggregation Framework in MongoDB to calculate the average price for a specific Model within a given date range? Model var PriceSchema = new Schema({ price: { type: Number, required: true }, date: { ...

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

Exploring the World with GPS Technology and Coding

Starting off, I am looking to develop a web-based or browser-based application in the near future. The goal is to incorporate a GPS module as part of the interface for a self-hosted application on tablets or laptops, utilizing the data for tracking purpo ...

Troubleshooting: Scope not updating in AngularJS xeditable typeahead

Currently, I am utilizing the angular xeditable typehead directive to display an autocomplete dropdown. The data is being retrieved from a JSON file on the page and utilized in the jso array for e-typeahead functionality. When typing into the input field, ...

The pre-loader is hidden behind the block content and navigation bar

I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...

What could be the reason behind receiving a TypeError upon refreshing the page, where it claims that a state is not found even though that may not be the actual situation?

Within my application, I have a component called Wall. Users are redirected to the Wall component after successfully logging in from the Login component. In the Wall component, I am retrieving and displaying the user's name that they used during regis ...

Hidden form in JavaScript does not submit upon clicking the text

My previous question was similar to this but with a smaller example. However, the issue with that code differs from my current code. (If you're curious, here's my previous question: JavaScript Text not submitting form) Currently working on my fi ...

Combining arrays of JSON Objects and organizing them with Javascript

I have a JSON object containing arrays for different country regions. I am attempting to combine these arrays into a single select dropdown menu. The JSON structure is as follows: "latinamerica": [ "Argentina", "Bolivia", "Brazil", ...