CODEWITHSUNDEEP
javascriptcssgoogle-chrome
SBel
SBel

Reputation: 3359

Chrome bug? Changing left CSS changes offsetWidth

In this jsfiddle I change the left CSS appending "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);

You will find in the output 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

Thus, as you can see after a certain point Chrome begins to change the offsetWidth. I'm using the latest Chrome as of now "37.0.2062.124 m". Note that if I omit the "px" then it works consistently. What is your opinion, is this a bug?

Upvotes: 3

Views: 549

Answers (2)

Chad von Nau
Chad von Nau

Reputation: 4404

Update, Aug 6

This behavior is intentional. From the Chrome team:

This is intentional as we snap elements to the pixel grid. The offset* properties return the snapped values and as such are dependent on the rendered size, and by extension, position.

element.getBoundingClientRect().width on the other hand will always return the "true", unsnapped, size.

https://code.google.com/p/chromium/issues/detail?id=512307#c5

In your example, the element is 154.4375px wide. Setting its left position to .1px makes it occupy more than half of the 155th pixel, and so it snaps to an offsetWidth of 155.

It's a shame that Chome and Safari behave differently from Firefox and IE, but I can understand both approaches.

Original Post, Jul 21

I believe this is a bug. I also experienced it with the tooltips in my app. I reported it to the Chrome and Safari teams:

Fingers crossed.

I used your demo as the example, hope you don't mind.

Upvotes: 1

pandorym
pandorym

Reputation: 485

I just tried it, and even with the "px" removed, the output log was the same; the width of the tooltip was 155 between 0 and 0.5.

For all other sizes until the tooltip box reaches the right side, the width is 154.

This is definitely not a Chrome specific thing, the same behavior is exhibited on Safari; I presume, if anything, it's a CSS or javascript 'bug', based in the way floats are parsed.

EDIT: The size does remain the same on Firefox.

Upvotes: 1

Related Questions