The details provided in Mozilla's documentation on elementFromPoint clarify that the coordinates are specified in "CSS pixels" rather than physical pixels. This raises a question about what exactly CSS pixels entail. Many assume that a pixel in CSS is equivalent to a physical pixel, but this appears not to be true.
In light of this distinction, how does one go about converting between physical and CSS pixels?
When it comes to web pages, a pixel is essentially a physical screen pixel.
The term 'CSS pixel' specifically refers to a pixel as outlined in CSS 2 here.
The CSS pixel is defined as the closest whole number of device pixels approximating the reference pixel. The recommended size for the reference pixel is based on a visual angle equivalent to one pixel on a 96dpi device at an arm's length distance of about 28 inches, resulting in a visual angle of approximately 0.0213 degrees.
In simpler terms, a CSS pixel typically corresponds to one device pixel for standard screens. However, for advanced high-resolution displays that upscale dimensions, a CSS pixel may span two device pixels.
Browsers now offer a 'zoom' function that adjusts the size of the CSS pixel and all other units, causing it to no longer align perfectly with a single device pixel.
It is common knowledge that CSS offers various units for measuring length, ranging from physical measurements like inches and millimeters to relative units like em width and percentage.
Unlike other units, pixels do not fall into either category. Originally, they were simply the smallest dot on a user's screen. However, this straightforward definition poses several challenges:
Therefore, CSS pixels serve as a valuable abstraction, maintaining consistent relationships with other measurements (at least within individual browsers). Page designers can trust that their designs will closely resemble the results, even when the browser adjusts the relationship with actual device pixels.
In response to your second query, there is no need to convert between physical and CSS pixels. Such conversions would disrupt the crucial abstraction required by the renderer for proper operation. While Gecko does provide a method for determining this relationship, it is meant for chrome scripts, keeping regular web pages blissfully unaware of these complexities.
Transformations are now achievable using window.devicePixelRatio; and it is universally supported by all popular browsers
For more details, visit https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
Yes, in the majority of instances, CSS pixels are equivalent to physical pixels. As stated in the CSS 2.1 Specification:
Pixel units are in relation to the resolution of the viewing device, typically a computer display. If the pixel density differs significantly from that of a standard computer display, the user agent should adapt pixel values accordingly.
Generally speaking, one device pixel will equate to one CSS pixel. In some cases, on a high-density pixel device, the CSS pixel size may actually span two physical pixels wide, although there aren't many devices known to do so. Even the iPhone 4, featuring its Retina Display, doesn't modify its CSS pixel size.
It's worth noting, as emphasized by Shog9, that most browsers' zoom functions affect the scale of displayed pixels, but for the most part, CSS pixels align with the physical device pixels.
I've been working on creating a unique custom image upload button that functions perfectly in Chrome, Firefox, and Opera based on my testing. However, I'm facing an issue where it doesn't work properly in Microsoft Edge. Feel free to check ...
My goal is to disable the responsive features of bootstrap when the event javascript:print() is triggered. This way, I want my webpage to maintain the column grid layout that I have defined, regardless of screen size. One solution suggested in this answer ...
I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...
I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...
Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...
While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...
Currently, I am working on a PHP script where I have divided each section into separate .php files and included them using the include() function. Here is an example of how everything is set up in different folders: header.php footer.php etc.. When acc ...
I've been working on creating a triangle-shaped CSS divider. Using the code snippet below, I was able to achieve the desired result: border-width: 4vw 75vw 0 23vw; However, this method feels a bit unconventional. Since you can't use percentages ...
Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...
#container { height: 500px; width: 500px; background-color: blue; } #container>div { background-color: rgb(36, 209, 13); height: 100px; } #one { width: 1000px; } #two { width: 800px; } <div id="container"> <div id="one">&l ...
Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...
How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any sugges ...
I have been trying to find a solution for my fixed div that sticks to the bottom, but nothing seems to work. My goal is to have the div stop when it reaches the #footer section of the page. Visit the site The CSS currently in place gives the div the cla ...
Let me start by saying I have always struggled with CSS positioning. It seems like I am missing something simple here... So, I have a JS script that generates divs within a parent container called #container which is set to absolute position. Here is the ...
After customizing my own html and CSS for Azure AD B2C sign-up and sign-in policy using the steps outlined in this resource, I have successfully created custom Sign-Up and Sign-In pages. However, my next goal is to make the sign-up page dynamic by passing ...
I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...
When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...
Currently, I'm working on an Oracle Apex jmobile query project involving an HTML page that includes the following image code: <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="center"> </center> Additionally, there is CSS to st ...
Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...
Why does the loading image not appear at the center bottom of the page in IE? This function loads content when the page is loaded and also loads content when scrolled to the bottom. When you load the page index.php, you will see the loading image at the ...