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'm currently in the process of developing a website that requires a specific div element to be horizontally scrollable if its content exceeds the screen size. This functionality works smoothly on most browsers, except for Safari: Scenario: When the ...
I am attempting to replicate the subtle shadow effect displayed in the image. Struggling with implementing this shadow effect using CSS. I experimented with box-shadow: box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); resulting in: T ...
Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...
My anchor tag has an href attribute that looks like this: <a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'. When clicking on it, the URL appears as http://localhost:54986/Dealerlist.aspx#productName ...
I have this snippet in my .css file: .attachment-label { font-size: 10px; font-style: italic; color: rgba(0,0,0,.5); } When I try to use it in my HTML like this: <div class="card-body"> <span class=" ...
One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen. Here's the CSS code for this sliding panel- slide-in-panel-component{ dis ...
After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...
Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...
Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below. https://i. ...
Click here to view folders and files server.js is the code I have created so far //importing packages const express = require('express'); const admin = require('firebase-admin'); const bcrypt = require('bcrypt'); const path = ...
Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...
I need some assistance with using JavaScript to determine the height of an element within a flexslider. There are two challenges I am facing. When I attempt to use a regular function getHeight(){ var h = document.getElementById("id-height").style.height; ...
Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...
https://gyazo.com/1440b13007c6e011ec46218ceecabb6a Upon examining the screenshot, it is evident that there is a white border surrounding the main content of the page. Despite my attempts to adjust everything to 100% width, I have not been success ...
Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...
After configuring the CSS for this site using CodeIgnitor, I placed it in the specified location: {link rel="stylesheet" type="text/css" href="<? echo base_url();?>application/assets/css/public.css" /> Although Firebug confirms that the link is ...
HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...
My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...
Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...
It seems like bootstrap is mysteriously including an unseen margin in my column classes. Even after inspecting an element labeled as 'col-lg-3,' there is no visible margin CSS, and attempting to manually add margin:0 still results in a margin bei ...