Firefox version 78.0.1's Responsive Design Mode fails to provide accurate window.innerWidth values after screen orientation change

Could this be a bug specific to Firefox, or have I made an error somewhere?

When testing in Chrome or on an actual device like Android, everything works fine. It appears to be an issue only when using Firefox's Responsive Design Mode.

Below is the complete code needed to reproduce the problem:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
</head>
<body>

<script>
var pageInPortraintMode;

// Prevent keyboard from squeezing the entire UI
addEventListener("load", function() {
  pageInPortraintMode = window.innerHeight > window.innerWidth;
  document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
})

// Listen to window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);

function windowSizeChanged() {
  alert(window.innerWidth + "x" + window.innerHeight);
  if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (window.innerHeight > window.innerWidth))) {
    pageInPortraintMode = window.innerHeight > window.innerWidth;
    document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
  }
}
</script>

<div style="width:100%; height:100%; background-color:#000; position:fixed; left:0; top:0"></div>

</body>
</html>

To replicate the issue, enter Responsive Design Mode (Ctrl+Shift+M), load the HTML, and then click the "Rotate Viewport" button.

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

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

"Encountering a hiccup in executing map.reduce

var mapFunction1 = function() { for (var i = 0; i < this.money.length; i++) { emit("balance", this.money[i].amount); } }; var reduceFunction1 = function(keyBalance, valuesBalance) { return Array.sum(valuesBalance); }; db.users.ma ...

Tips for implementing the f11 effect with a delay of 5 seconds after pressing a key in JavaScript or jQuery

Is there a way to activate the F11 effect only 5 seconds after pressing a key using JavaScript or jQuery? ...

For every iteration, verify the presence of the image

I am currently working on a foreach loop to iterate over the data returned by an ajax call. Within this loop, I am checking if each record has an associated image. Code for Checking Image Existence: function checkImageExists(url, callback) { var img ...

Encountered a 'File is not defined' error in JavaScript when running code from the node.js command line

I'm encountering an issue with my JavaScript code that is supposed to read a file and print it on the console. Despite having the file test.txt in the same path, I keep getting an error saying "File is not defined." Below is the snippet of the code: ...

Utilizing Ajax to dynamically load files within the Django framework

My current project involves working with Django, specifically a feature that requires loading a file and displaying its content in a textarea. Instead of storing the file on the server side or in a database, I am exploring the use of AJAX to send the file ...

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

The code I am currently using is producing the following errors in the console output: [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. [Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, ...

What strategies does NPM/WebPack employ to handle duplicate dependencies across different version ranges?

I am working on an application that relies on various packages, each with its own set of dependencies. For instance, my app may require package@^1.0.0, while another package it uses may demand package@^1.5.1. When I build the app for production, will both ...

Extracting Data from JSON Structures

I am struggling with extracting data from a JSON string that looks like this: var txt= '{“group”: [ {“family1”: { “firstname”:”child1”, “secondname”:”chlid2” }}, {“family2”: { ...

What is the best way to empty input, select, and textarea fields after performing a clone operation

I am currently working on creating a form to display items and need a fresh text field when the user clicks the ADD button. function addNewItem() { //ADD ROW AND CLONE var table = document.getElementById('tbl'); var tbody = document.create ...

Is there a way to retrieve a promise from a function that triggers a $http.get request in AngularJS?

Looking for a solution to modify this function: getX: function ($scope) { $http.get('/api/X/GetSelect') .success(function (data) { ... ... }) .error(function (data) { ...

Is there a way to adjust the border color of my <select> element without disrupting the existing bootstrap CSS styling?

In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below: https://i.sstatic.net/3suke.png Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Op ...

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

Is it possible to save the current permissions for a channel or category in Discord.js and then restore them after a certain event occurs?

A Little Background I recently came across a lockdown command on YT that locks down all channels in the guild when you type "!lockdown". This command overwrites channel permissions for specific roles. However, when we unlock the channels, everyone is able ...

How to create a sequence of queries to a mongoDB database (using mongoose) depending on a condition

Source Code let placeForSearch="hampi" let filteredHotelFacilities=req.body.filter //["Free Wifi"] let hotels = await Hotel.find({placeForSearch}) .where("facilities") .select(selectedProperties) .skip(pageNu ...

`Need help testing flow.js file uploads using Selenium?`

My AngularJS SPA allows users to upload files using the ng-flow wrapper for flow.js. I am currently in the process of setting up automated e2e tests with Selenium, but I am facing challenges when it comes to testing the file uploading mechanism triggered b ...

Experiencing difficulties with the onClick functionality on a registration form

Recently started learning React, so I apologize if the solution seems obvious. Currently working on a registration form that should create a new account upon submission using AJAX. Although I understand that I need to use onChange to gather the submitted i ...

Slow execution of Bootstrap v4 modal display

It has come to my attention that the modals in Bootstrap show slower as the page's content increases. When the page is empty, it only takes less than 100ms to show. However, the time it takes significantly increases as more content is added to the pa ...

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...