Could there be a glitch in Chrome? Tweaking the CSS on the left side

Take a look at this jsfiddle where I modified the left CSS property by appending "px" to it:

function adjustLeft(leftVal) {
    var left = parseFloat(leftVal);
   //tooltip.style.left=left;
   tooltip.style.left=left + "px"; 
    log("left: " + left + ", width: " + tooltip.offsetWidth);
}

I tested the function with the following values:

adjustLeft(0.1);
adjustLeft(0.2);
adjustLeft(0.3);
adjustLeft(0.4);
adjustLeft(0.5);
adjustLeft(0.6);
adjustLeft(0.7);
adjustLeft(0.8);
adjustLeft(0.9);

The output log showed the following results:

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

Upon reaching a certain point, Chrome seems to alter the offsetWidth value. I'm running the latest version of Chrome "37.0.2062.124 m". Interestingly, if I exclude the "px", the function behaves consistently. Do you think this could be a bug?

javascriptcssgoogle-chrome

Answer №1

After testing it out myself, I found that even after removing the "px", the output log still showed a tooltip width of 155 when the value was between 0 and 0.5.

However, for all other sizes until the tooltip box reaches the right side, the width remained at 154.

This issue doesn't seem to be specific to Chrome as the same behavior was observed on Safari. It could potentially be a CSS or javascript error related to how floats are processed.

UPDATE: Interestingly, the size did not change in Firefox.

Answer №2

Update, Aug 6

This behavior is by design according to the Chrome team:

The snapping of elements to the pixel grid is intentional. The offset* properties provide values snapped to the grid, depending on the rendered size and position.

In contrast, element.getBoundingClientRect().width always returns the actual, unsnapped size.

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

In this scenario, the element is 154.4375px wide. Adjusting its left position to .1px causes it to occupy more than half of the 155th pixel, leading it to snap to an offsetWidth of 155.

While it's unfortunate that Chrome and Safari differ from Firefox and IE in their behavior, both approaches have their merits.

Original Post, Jul 21

I suspect this may be a bug, as I encountered similar issues with tooltips in my application. I have notified both the Chrome and Safari teams about this problem:

Fingers crossed for a resolution.

I used your demo as an example; I hope that's alright with you.

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

Storing a new field without saving mongoose.Types.ObjectId as a database column in MongoDB

Trying to establish a relationship between two collections in MongoDB. I have a User collection with unique _id for each user, and a News collection where each news item should be linked to a specific user using their userId. In my API workflow, the userI ...

javascriptnode.jsdatabasemongodbmongoose

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

I am working with an <input> tag that has the attribute type="number", and I want to disable keyboard input so that users are required to adjust the value using the spinner (up and down arrows). This will allow me to consume the input value on each c ...

javascripthtmlreactjsmaterial-ui

Issue with Vue JS Components: Button function not working on second click with @click

I've been working with Vue JS and Laravel to create a modal. The first time I press the button with @click, it works fine but the next time I encounter an error. Here's my Laravel Blade code: <div class="col-span-12 mb-5" id="a ...

javascriptvue.jsvuejs3vue-componentlaravel-blade

How can JavaScriptExecutor be used to stop searching for an element on a constantly scrolling interface, such as Facebook, after a specific time period?

Imagine that I am trying to locate my post on a Facebook page by continuously scrolling down. Specifically, I am searching for my post based on my profile name. To achieve this, I utilize JavascriptExecutor to initiate the scrolling process until it locate ...

javascriptjavaseleniumscroll

Encountered an error when creating my own AngularJS module: Unable to instantiate

Attempting to dive into TypeScript and AngularJS, I encountered a perplexing error after following a tutorial for just a few lines. It appears that there may be an issue with my mydModule? angular.js:68 Uncaught Error: [$injector:modulerr] Failed to inst ...

javascriptangularjsvisual-studiotypescript

The AJAX response is not functioning as expected

I've encountered an issue with my AJAX code for an online food store. Every time I run it, a pop-up message saying something went wrong appears instead of the expected output. I suspect there might be an error in either the connection handlers or the ...

javascriptphpajax

Two floating elements collide as the first one drifts over the second

I am working on a simple webpage that should take up the entire browser window. There are only two elements in it, but the issue is that the second element is being overlapped by the first. form { background-color:#996600; width:30%; height:1 ...

htmlcsscss-float

Replicating a tag and inputting the field content

Scenario: An issue arises with copying a label text and input field as one unit, instead of just the text. Solution Needed: Develop a method to copy both the text and the input field simultaneously by selecting the entire line. Challenge Encountered: Pre ...

javascripthtmlevent-handlingdom-eventscopy-paste

Separating a picture into distinct sections

Is there a way to divide an image into different parts to create hover effects? For example, hovering over the top part of the image triggers one change, and hovering over the bottom part triggers another change. This example demonstrates this concept usin ...

htmlcss

Browser-compatible search bar for numerical values

How can I restrict my search bar to only accept numbers in all browsers? I attempted using type="numbers", but it caused issues with the functionality of my search bar. Suggestions involving JavaScript and JQuery are appreciated. Check out the JSFiddle fo ...

javascriptjqueryhtmlcss

Struggling to make Tumblr Javascript function properly

I have integrated the following code snippet: <script type="text/javascript" src="http://underlineent.tumblr.com/api/read/json"> </script> Unfortunately, my Tumblr blog is not appearing on this site. Can anyone provide assistance? The provid ...

javascripthtmljsontumblr

Having trouble properly displaying information from a JSON array with jQuery

Having a basic array of data in a JSON file is presenting a challenge for a beginner like me when it comes to extracting the data. Here is the array that I have access to: var clients = [ { "clientid": "456489", "client-name": "John Smith", "e ...

javascriptjqueryarraysjson

The gap in rows is not displayed in CSS subgrid

Currently, I am delving into the world of CSS grid and subgrid. My current project involves creating a simple form with two columns and incorporating a few subgrids. In my design, the parent grid displays a gap of 1em - both the columns and rows have a pr ...

csscss-gridsubgrid

using ng-show to display array elements

There is a syntax error showing up on the console for the code below, but it still functions as intended. Can someone help identify what I might be missing? <p class="light" data-ng-show="selectedAppType in ['A1','A2','A3' ...

javascriptangularjs

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

If I click on a different VueJS menu, make sure to close the current menu

When using a component menu, each item is displayed independently. However, I would like the open items to close automatically when I click on another item with the menu. I employ a toggle functionality on click to control the opening and closing of the c ...

javascriptvue.jsvuejs3

Get a notification from the Telegram bot once your payment is processed, and receive a

My Telegram bot successfully processes payments, but I am facing an issue with showing receipts after each successful transaction. Here is the current behavior: User clicks on the PAY button, fills in the card information, and completes the payment for t ...

javascriptnode.jstelegramtelegram-bottelegram-api

Designing webpages by superimposing text onto images with customizable positioning

My current project involves developing an HTML document with a floor plan image as the main layer. On top of this image, I need to display employee names extracted from a database and positioned on the map based on a location variable within the database ...

javascripthtmlimage

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

csstwitter-bootstrap

Is there a way to set up an automatic pop-up for this?

Experience this code function AutoPopup() { setTimeout(function () { document.getElementById('ac-wrapper').style.display = "block"; }, 5000); } #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; back ...

javascripthtmlcsspopup