Chrome error? Change changes left CSS offsetWidth
In this jsfiddle, I change the left CSS adding "px" to it:
function changeLeft(leftVal) {
var left = parseFloat(leftVal);
//tooltip.style.left=left;
tooltip.style.left=left + "px";
log("left: " + left + ", width: " + tooltip.offsetWidth);
}
For the following values:
changeLeft(0.1);
changeLeft(0.2);
changeLeft(0.3);
changeLeft(0.4);
changeLeft(0.5);
changeLeft(0.6);
changeLeft(0.7);
changeLeft(0.8);
changeLeft(0.9);
In the output you will find the following log:
left: 0.1, width: 155
left: 0.2, width: 155
left: 0.3, width: 155
left: 0.4, width: 155
left: 0.5, width: 154
left: 0.6, width: 154
left: 0.7, width: 154
left: 0.8, width: 154
left: 0.9, width: 154
So, as you can see after a certain point, Chrome starts to change offsetWidth. I am using the latest Chrome at the moment "37.0.2062.124 m". Note that if I omit "px" then it works consistently. What is your opinion, is this a mistake?
source to share
I just tried it and even with the "px" removed, the output log was the same; the tooltip width was 155 from 0 to 0.5.
For all other sizes, until the tooltip reaches the right side, the width is 154.
This is definitely not a Chrome feature, the same behavior appears in Safari; I guess if anything, it is a CSS or javascript bug based on how floats are parsed.
EDIT: The size remains the same in Firefox.
source to share
Update Aug 6
This behavior is intentional. From the Chrome team:
This is intentional when we bind elements to the pixel grid. The offset * properties return anchored values and as such are dependent on the displayed size and by extension, position.
element.getBoundingClientRect (). width, on the other hand, will always return the "true", undisclosed, size.
https://code.google.com/p/chromium/issues/detail?id=512307#c5
In your example, this element is 154.4375 pixels wide. Setting its left position to .1px makes it take up more than half of the 155th pixel, and so it snaps to the offsetWidth of 155.
It's a shame that Chome and Safari behave differently than Firefox and IE, but I can understand both approaches.
Original publication July 21
I believe this is a mistake. I've also experienced this with tooltips in my app. I reported this to the Chrome and Safari teams:
- https://code.google.com/p/chromium/issues/detail?id=512307
- https://bugs.webkit.org/show_bug.cgi?id=147136
Fingers crossed.
I used your demo as an example, I hope you don't mind.
source to share