Calculation error causing incorrect top value display in Chrome [bug alert!]

After dynamically creating an element in jQuery and adding it to the page, I applied a class that sets its position to top:50%. Everything appeared fine at first glance, with the element positioned correctly at 50%. However, when attempting to retrieve the value of 'top' using .css('top'), I discovered that it returned an incorrect value of 470 instead of 20. This discrepancy caused errors in the effect that I was trying to achieve, as it relied on obtaining the correct value through JavaScript. Interestingly, this issue does not occur in Firefox; where I can accurately retrieve both the displayed and computed values.

Jsfiddle: http://jsfiddle.net/techsin/dbj2un2e/

d.css( 'top', d.css('top') ); alters the actual position in Chrome. (Uncomment to observe its impact)

To provide further clarification, I have included a screenshot. (View image in new tab for clearer visibility)

jqueryhtmlcssgoogle-chrome

Answer №1

try using position().top in place of css('top')

let element = $('<div>').addClass('zzz');

$('.abc').append(element);

console.log(element.position().top);

FIDDLE

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

Displaying the number zero in TYPO3 Fluid without it being empty or NULL

Within my TYPO3 Fluid template, I am encountering an issue where I need to display a value only if it is not empty. Currently, my approach is as follows: <f:if condition="{myvalue}"> <div class="myclass">{myvalue}</div> </f:if> Th ...

htmltypo3fluid

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

What is the proper way to use an AND operation in jQuery on multiple attributes?

I have a list of DIV tags structured as follows: <div status="1" searchText="some text">...</div> <div status="2" searchText="more text">...</div> <div status="1" searchText="even">...</div> To toggle the visibility of ...

javascriptjquery

Implementing text truncation in JavaScript

I am seeking to transform the INPUT I have into a desired OUTPUT format. pieChart.js stackedColumnChart.js table.js and i want OUTPUT like that(wanna remove .js from ) pieChart stackedColumnChart table ...

javascriptjqueryangularjs

Minimal - Combining a module with a parent component

To provide some background, I am utilizing bootstrap nav pills as triggers for bootstrap collapsibles. This is a simplified representation of the LESS code for bootstraps nav pills: .nav-pills { > li { // Active state &.active > a ...

htmlcsstwitter-bootstrapless

A combination of Webpack CSS modules with Angular templates

I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template. When I embe ...

cssangularjswebpack

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

csstwitter-bootstrap-3bootstrap-multiselectkendo-window

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

Expanding content will not cause Flexbox to stretch

I am facing an issue with a container that includes a header tag and a div. The height of the div is set to 100vh, causing it to consume all available space. Within the div, there are two additional divs. Everything works as expected until I add more conte ...

htmlcssflexbox

Display a single image on each slide when viewing Media Slider Carousel BS3 on a mobile device

Currently, I am implementing the Media Slider Carousel BS3 from bootsnipp on a webpage to create a compact slider. However, my goal is to customize it for mobile screens so that only one image displays per slide instead of three. For instance: https://i. ...

jquerytwitter-bootstraptwitter-bootstrap-3

Utilizing X-editable and Parsley to trigger dual Ajax calls

Here is a snippet of code I am working with: $.fn.editable.defaults.mode = 'inline'; var editable = $('.x-editable').editable({ send: 'always', validate: function() { var form = editable.next().find('form ...

javascriptjqueryajaxx-editableparsley.js

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

phphtml

Activate the Air-mode feature in Summernote in addition to the standard toolbar

Is it possible to have both the default toolbar and air-mode toolbar enabled in the Summernote editor? For instance, I would like the user to utilize the default toolbar for general text editing, but have the air-mode toolbar appear when they select a spe ...

javascriptjquerysummernote

Verify information and send messages using JavaScript validation

I need assistance with my HTML form and JavaScript code. I am trying to send a parameter from the form to JavaScript in order to check if the input matches any values in an array. If there is a match, I want an alert message to be sent. However, the issue ...

javascripthtml

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...

javascripthtmlcss

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

When dealing with a string containing a unique prefix, I attempted to separate it into an array after the backslash character "\" by using the split function. Here is the string: i:0#.w|itun\allepage_fg This was my approach: function claimOrder ...

javascriptjquerystringsplitsubstring

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

"Unfortunately, the Datatables Individual Column Search feature is not compatible with the

I am currently using Datatables to showcase a large dataset with over a thousand rows in a table format. To enable users to search for specific information within each column, I have implemented the feature of individual column search. The initial setup of ...

jquerycssdatatables