Is there a reflow triggered by `window.matchMedia` function execution?

When creating a webpage, it's important to minimize "layout thrashing" or "reflow", which occurs when the browser recalculates the dimensions and positions of all elements on the page. Paul Irish has compiled a valuable list of processes that trigger reflows, stating:

Typically, any APIs that provide layout metrics synchronously will result in forced reflow/layout.

Why is the method 

https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia
not included in this list? Doesn't it involve measuring the window size? Can we safely use it without causing reflows?

htmlcssbrowserrenderingreflow

Answer №1

As far as I know, the accuracy of the list is reliable and matchMedia does not cause a reflow. Each media query has been meticulously crafted to function independently of page content. For instance, the specification for width defines it as the viewport width inclusive of the scrollbar to ensure consistent results regardless of the presence or absence of a scrollbar.

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

Employing ngModel in an option dropdown

I am having trouble passing an attribute from an API call to a submit function. I suspect it might have something to do with either the option select or how the input is being formatted. Encountering the error Error: No value accessor for form control wit ...

htmlangulartypescriptapiangular-ngmodel

Utilizing ajax for modifying iframe contents

Can the URL of an iframe be altered without navigating away from the current page using Ajax? If yes, please provide instructions on how to achieve this. Appreciate your help! ...

javascripthtmlajaxiframe

What is a way to show a single row of six columns on desktop and two rows of three columns on mobile devices?

I have a section with 6 images that I want to display in one row with 6 columns on desktop, and then in two rows with 3 columns each on mobile. While I have achieved the desired layout on desktop, the images stack on top of each other in a single column o ...

htmlcsstwitter-bootstrapbootstrap-4

Issue With ASP.Net Dropdown List Not Showing My Selected Option Again

I am facing an issue with retrieving the initially selected value from a dropdown list on my ASP.NET form. The form consists of 4 pages and the data is being stored in the session successfully. HTML for the 1st Page Including DropDownList <asp:DropDow ...

htmlasp.netwebforms

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

The code snippet I have is as follows. HTML <div ng-repeat="item in canvasElements" id="declareContainer"> {{item}} </div> Javascript (Angular) (function(){ //angular module var dataElements = angular.module('dataElements' ...

jqueryhtmlangularjsjquery-ui

retrieve the class name of a reusable component in HTML

I have been assigned a web scraping project and I am required to scrape data from the following website for testing: The HTML: <div class="quote" itemscope itemtype="http://schema.org/CreativeWork"> <span class="text& ...

javascripthtmlweb-scrapingcomponents

The hamburger menu fails to close when clicked on in Bootstrap

I seem to be having an issue with the hamburger menu on my website. When I click on it, the menu opens as expected. However, when I click on it again, the menu doesn't close properly. It appears to flash or maybe it is closing and reopening quickly up ...

htmlbootstrap-4

What is the best way to retrieve the value from a malfunctioning HTML date input field?

I am currently developing a custom calendar picker to complement (and serve as a replacement for the default date picker provided by certain browsers) an input with type="date". It has come to my attention that Chrome's date input allows fo ...

javascripthtmlvalidationhtml-input

Presenting a trio of distinct tables each accompanied by its own unique button option

I am attempting to create a functionality where there are 3 buttons and when a user clicks on one of them, it shows the corresponding table while hiding the other two. I have experimented with using getElementById to manipulate the display property of the ...

javascripthtml

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

I'm unable to adjust the font size of the final h3 element

I'm currently designing a webpage with various titles, but I've encountered an issue. I am unable to adjust the font size of the last h3 title without affecting the rest of the titles. I'm curious as to why this is happening and how I can re ...

htmlcssdom

What steps can be taken to ensure the WhatsApp icon is easily visible on a small screen?

I currently have a navigation bar with the left side dedicated to navigation items and the right side featuring a whatsapp icon. <mat-toolbar class="nav"> <a routerLink="app-aaa" mat-button>aaa</a> <a routerLi ...

htmlcssangularangular-material

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

htmlcssbootstrap-5

What could be the reason for the state not initializing with the provided value?

It seems that the latest value is being passed through props, but when it is set as the initial value for state, it doesn't appear. https://i.stack.imgur.com/7dVf2.png import React, { useRef, useState } from "react"; //importing config fr ...

htmlreactjswebreact-hooks

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

The error message "Conflict Between Editor Elements Detected (Code: CKEDITOR Error code

Incorporated within my web application is the CKEditor jquery adapter which functions smoothly, however, a console error appears: Upon consulting the CKEDITOR dev error documentation, I found an explanation for the error but unfortunately no solution was ...

javascriptjqueryhtmlckeditor

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

I am currently working with VueJS and attempting to send a GET request to my API. I am using axios, but encountering an issue when trying to import it. If I use require for the import, I receive this error: Uncaught ReferenceError: require is not defined. ...

javascripthtmlvue.jsaxiosget

Unable to load images on website

I'm having trouble showing images on my website using Node.js Express and an HBS file. The image is not appearing on the webpage and I'm seeing an error message that says "GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)" Here is the ...

javascripthtmlnode.jsexpresshbs

Establishing a PHP session variable and then initiating a redirect to a new page through the HREF method

I am working on a table that pulls IDs from a MySQL table named auctiontable and displays them in rows. Currently, I can easily append ?aid="1"or ?aid="2" to the end of the href attribute to utilize $_GET. However, I want to prevent users from controllin ...

javascriptphphtmlmysqlsession

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

htmlcssinputchecked