New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3.1.x -> 3.2.x contains breaking change (`outerWidth` behavior) #3611

Closed
jacobq opened this Issue Apr 4, 2017 · 19 comments

Comments

Projects
None yet
8 participants
@jacobq

jacobq commented Apr 4, 2017

Please pardon this lengthy issue report. If you think it should be split into multiple separate issues please let me know and I will attempt to do this, but I'm not sure how these observations relate.

This may be related to #3589 or the fixes for #3193 mentioned in the 3.2.0 release notes, but I'm not sure. (I don't think it's related to the 3.0 breaking change since it worked in previous 3.x versions.)

Problem 1: Firefox: .width() & .outerWidth() return % values instead of px values for inline elements

Tested on v45.8.0 (ESR) on Linux as well as 51.0.1 (32-bit) on Windows 10 (64-bit)

Duplicate of #3571 Problem 2: Chrome: .width() returns 0 for inline elements

Problem 3: .width() / .outerWidth() gives different/wrong result on Chrome + Linux

This appears to be related to how padding is used in the calculation as well as to setting:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

jquery-working-311
jquery-broken-latest
jquery-broken-firefox-latest
jquery-windows-working-latest

Background / Other Notes

This all started with a problem I had using Materialize. with the latest jQuery (3.2.1). The "tab indicator" suddenly started appearing too wide. You can see this here.
After digging into this a bit I found that:

  • It appears to affect Chrome on Linux (x86_64), not Firefox (ESR / 48.5.0) on Linux or common Windows browsers.
  • It works fine with jQuery 3.1.x but not 3.2.x (assuming semver compliance this should not happen)
  • Using .get(0).getBoundingClientRect().width instead of .outerWidth() avoided the problem
@Krinkle

This comment has been minimized.

Member

Krinkle commented Apr 5, 2017

Problem 2 was indeed a regression (width/height broken for inline elements). Reported as issue #3571, since then resolved in master and released in jQuery 3.2.1 (see http://blog.jquery.com/2017/03/20/jquery-3-2-1-now-available/).

Although with notable exception that it is still broken on Android 4 - see issue #3602.

@jacobq

This comment has been minimized.

jacobq commented Apr 5, 2017

@Krinkle Thanks for pointing that out. I updated my issue/comment to reflect this. I also spent some time this morning trying to figure out the root cause of the tabs issue (see notes at bottom of issue text) with the latest jQuery. I narrowed it down quite a bit and added links to jsbins as well as screenshots showing the discrepancies I observed in hopes that someone from the jQuery team will be able to identify what change caused this.

@timmywil

This comment has been minimized.

Member

timmywil commented Apr 10, 2017

@jacobq Thank you for the thorough analysis!

@timmywil timmywil added this to the 3.3.0 milestone Apr 10, 2017

@timmywil timmywil added the Blocker label Apr 10, 2017

@TimePerformance

This comment has been minimized.

TimePerformance commented Apr 24, 2017

Problem 4: outerHeight() returns wrong value for a <td> in IE 11 (Windows 10) but works fine in Chrome

@faller

This comment has been minimized.

faller commented May 26, 2017

I have the same problem like Problem 3

@smasala

This comment has been minimized.

smasala commented Jul 25, 2017

@jacobq thanks for this (Problem 3). I can confirm it's the same problem under windows with FF 54.0.1 (64-bit) & Chrome 59.0.3071.115 (64-bit) and only for jQuery versions >=3.2.0

@smasala

This comment has been minimized.

smasala commented Jul 25, 2017

For an even weirder version of this problem in chrome.... it seems dependant on the url structure.

Datatables plugin:

  1. clone https://github.com/smasala/ColResize
  2. npm install (make sure jQuery 3.2.0 or 3.2.1 is noted in package.json)
  3. open in chrome -> file:///C:/Temp/ColResize/examples/index.html
  4. make a copy of index.html -> index1.html
  5. open in chrome ->file:///C:/Temp/ColResize/examples/index1.html - here it works. (but index.html won't)

Make this even weirder:

  1. move both index.html and index1.html into a sub folder of examples.
  2. now both index.html and index1.html will render correctly
@jacobq

This comment has been minimized.

jacobq commented Jul 25, 2017

@smasala Just for fun I tried the exercise you shared but saw no differences between index.html and index1.html. Perhaps this is because of platform differences (I am running Linux 4.9 on x86_64, node v6.11.1, and Chrome 59.0.3071.115 (Official Build) (64-bit)) or maybe it was because I wasn't sure what to look for.

Nevertheless, I would strongly encourage you to simplify the portion of code that you're analyzing. When there are lots of parts at work it becomes very easy to become mislead (e.g. accidental caching, race conditions, dependence on inputs / user behavior, etc. can make one believe the problem is caused by something other than the root cause), and there are a number of nuances one has to deal with regarding how a browser will behave differently for file:// URLs. Based on your description I suspect that the problem you're seeing is different from the ones described by the issue (and that it may not even be related to jQuery).

If using an older version of jQuery solves the problem in your application I would recommend doing that until a 3.3.x release is ready since it's most likely the best use of your time.

@smasala

This comment has been minimized.

smasala commented Jul 25, 2017

@jacobq You would have seen the error if it hadn't have worked :)

I'm not looking for a solution with my plugin, just thought I'd post my random findings :) However, I found this issue because I narrowed the problem down to one line... jquery's outerWidth and only when box-sizing is set, after updating jQuery to the latest version (>=3.2.0) but was unable to replicate the issue with jsfiddle or similar. So it's good to have your links and examples above - I'm not going crazy after all :)

I've just tried #3611 (comment) on another machine and under Windows 10 (instead of 7) + Chrome it works fine too. Very odd. Perhaps there is something wrong with my SSD on the other machine. Will have to try it on other Win 7 setup just out of curiosity and a sanity check :) 👍

@smasala

This comment has been minimized.

smasala commented Jul 26, 2017

@jacobq FYI :) works on other Win 7 / Chrome systems just fine. However, can be reproduced on my machine every time without fail. 3.1.1 works, 3.2.x produces the exact problem as you described above (problem 3). Also the case in Chrome 60.0.3112.78. I give up :)

@gibson042 gibson042 self-assigned this Jul 31, 2017

@gibson042

This comment has been minimized.

Member

gibson042 commented Jul 31, 2017

As of a495784, everything is fixed except Problem 1.

@jacobq

This comment has been minimized.

jacobq commented Aug 8, 2017

@gibson042 Thanks; this looks a lot better, though there is still a discrepancy. Any idea why my jsbin example (#3) gets all zeros with 3.1.1 but not with the latest (jQuery v3.2.2-pre 3cf1d14)? (In Chrome on Windows I see differences on the order of 0.48749542236328125)

@gibson042

This comment has been minimized.

Member

gibson042 commented Aug 8, 2017

Yes, it's because 3.1.1 was using getBoundingClientRect but latest is actually calculating CSS boxes. Even though the latter can only approximate, the former is wrong because it is affected by transforms (scale, rotate, etc.).

@jacobq

This comment has been minimized.

jacobq commented Aug 8, 2017

@gibson042

This comment has been minimized.

Member

gibson042 commented Aug 8, 2017

I'd recommend that you instead plan to upgrade and use getBoundingClientRect directly if that's what your use case needs.

@gibson042

This comment has been minimized.

Member

gibson042 commented Aug 8, 2017

I suppose it would also be possible for us to use the fractional component from gBCR, but that would be a separate issue:

val = elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ];
if ( elem.getClientRects().length ) {
	val += ( elem.getBoundingClientRect()[ dimension[ 0 ] ] + 0.5 ) % 1 - 0.5;
}
@mgol

This comment has been minimized.

Member

mgol commented Aug 8, 2017

@gibson042 That would be vulnerable to transforms as well, wouldn't it?

@gibson042

This comment has been minimized.

Member

gibson042 commented Aug 8, 2017

Yes, but with a maximum error of half a pixel (i.e., no change from current) and recovering perfect accuracy in the absence of transforms.

@jacobq

This comment has been minimized.

jacobq commented Jan 29, 2018

This looks like it is fixed in v3.3.x (i.e. in the jsbin we now have ow - gbcr < 1 again). Can anyone else confirm?

Update: Nevermind: I see it here. Thanks, core team + contributors!

immpo added a commit to immpo/jquery that referenced this issue Feb 3, 2018

up (#1)
* Dimensions: ignore transforms when retrieving width/height

Close gh-3561
Fixes gh-3193

* CSS: remove dead code in getWidthOrHeight

- getCSS already falls back to inline styles

Ref gh-3561

* Release: update release dependencies

* Release: update AUTHORS.txt

* Release: update version to 3.2.0-pre

* Release: md5sum -> md5 -r for MAC

* Build: Updating the master version to 3.2.1-pre.

* Release: edit dist README version on release

Fixes gh-3574

* Build: update PR template

- Comment out things we don't need to see in the PR description
- Change CLA link

* Tests: move readywait to an iframe test

Close gh-3576
Fixes gh-3573

* Dimensions: fall back to offsetWidth/Height for inline elems

Close gh-3577
Fixes gh-3571

* Revert "Event: Trigger checkbox and radio click events identically"

This reverts commit b442aba.

* Revert "Event: Add radio click triggering tests"

This reverts commit 5f35b5b.

* Tests: add test for passing trigger data to radio click handler

Close gh-3581
Fixes gh-3579

* Build: Updating the master version to 3.2.2-pre.

* CSS: retrieve inline style before computed

- Fixes an issue with getting computed style on detached elements

* Revert "Build: Updating the master version to 3.2.2-pre."

This reverts commit 066bd86.

* Build: Updating the master version to 3.2.2-pre.

* Tests: Fix incorrect assert name for ensure_iterability_es6

Closes gh-3584
Ref bb026fc.

* Docs: Update links to HTML spec for stripAndCollapse (#3594)

* Offset: Use correct offset parents; include all border/scroll values

Thanks @anseki

Fixes gh-3080
Fixes gh-3107
Closes gh-3096
Closes gh-3487

* Core: Update isFunction to handle unusual-@@toStringTag input

Ref gh-3597
Fixes gh-3600
Fixes gh-3596
Closes gh-3617

* Tests: Improve offset test setup and labels

Hopefully this fixes iOS testing: http://swarm.jquery.org/job/5226

Ref 1d2df77
Closes gh-3641

* Tests: Be even more async for iOS

Ref 1d2df77
Closes gh-3643

* Tests: Attach test iframes to the body for visibility-dependent code

Ref 1d2df77
Closes gh-3645

* Tests: Allow a mock QUnit.test for perfect testIframe fidelity

Ref 1d2df77
Closes gh-3647

* Tests: Prepend test iframes for even *more* consistency

Ref 1d2df77

* Tests: Reset iframe window scroll after updating html/document position

Ref 1d2df77
Closes gh-3649

* Tests: Add debugging to investigate iOS failures

Ref 1d2df77

* Tests: Keep iframes visible in TestSwarm

Ref 1d2df77

* Tests: Adjust by actual scroll position, rather than expected

Ref 1d2df77

* Tests: Clean up offset debugging

Ref 1d2df77
Ref c0edd8d

* Tests: Correct expected assertion count

Ref e94b5b0

* Tests: Revert some testIframe changes to fix dimensions tests

Ref c0edd8d

* Revert "Tests: Revert some testIframe changes to fix dimensions tests"

This reverts commit c4368a9.

* Tests: Revert some testIframe changes to fix dimensions tests

Ref c0edd8d

* CSS: Drop the float mapping from cssProps

Firefox 35 and newer support style.float directly.

Closes #3569

* Docs:Tests: Update IE/Edge-related support comments & tests

Closes gh-3661

* Build: Test on Node.js 8, stop testing on Node.js 7

* Tests: minor typos

Close gh-3671

* Dimensions: Include scroll gutter in "padding" box

Fixes gh-3589
Closes gh-3656

* Deferred: fix memory leak of promise callbacks

Fixes gh-3606
Closes gh-3657

* Build: update node dependencies; commit package-lock.json

- Also ignore yarn.lock
Close gh-3669

* Build: Update sinon, husky, and qunitjs

* Build: fix uglify options for uglify update

- Uses new typeofs option for compression
- See mishoo/UglifyJS2#2198

Close gh-3710

* Event: `stopPropagation()` on native event-handler

Fixes gh-3693
Close gh-3694

* Core: Deprecate jQuery.isWindow

Fixes gh-3629
Close gh-3702

* Test: ensure position/offset return mutable objects

Fixes gh-3612
Closes gh-3695

* Revert "Offset: Resolve strict mode ClientRect "no setter" exception"

This reverts commit 3befe59.

* Offset: fix error from bad merge in #3695

* Dimensions: Detect and account for content-box dimension mishandling

Fixes gh-3699
Closes gh-3700

* Support: Properly check for IE9 absolute scrollbox mishandling

Ref gh-3589
Fixes gh-3699
Fixes gh-3730
Closes gh-3729

* Tests: Try extra hard to control focus

Ref gh-3732

* Tests: Abort focus tests when the environment doesn't cooperate

Ref gh-3732

* Tests: Reduce the abort timeout for simple focus testing

Ref gh-3732

* Tests: Simulate events when CI hinders use of native ones

Ref gh-3732

* Tests: Account for TestSwarm focus issues

Closes gh-3732

* Ajax: add an ontimeout handler to all requests

Fixes gh-3586
Close gh-3590

* Dimensions: Improve offsetWidth/offsetHeight fallback

Fixes gh-3698
Fixes gh-3602
Closes gh-3738

* Tests: Replace non-ASCII whitespace in source code

* Dimensions: Don't trust non-pixel computed width/height

Fixes gh-3611
Closes gh-3741

* Build: Fix comment typo

Closes gh-3747

* Build: Update my name in .mailmap

I got married! 🎉

* Build: Update my name in ATHORS.txt

I forgot .mailmap isn't everything.

* Tests: Update path calculation

Fixes gh-3756
Closes gh-3757

* CSS: Avoid unit-conversion interference from CSS upper bounds

Fixes gh-2144
Closes gh-3745

* Tests: Update lineHeight adjustments to give Android more slop

* CSS: Detect more WebKit styles erroneously reported as percentages

Ref 692f9d4
Fixes gh-3777
Closes gh-3778

* Build: Update to Babel 7, use for-of plugin instead of preset-es2015

Closes gh-3786

* Build: Drop cross-spawn, use child_process.spawn shell option

* Build: increase timeout in Promises/A+ tests 10 times

The promises-aplus-tests sets up a default 200 ms Mocha timeout. This makes
our tests randomly fail on Jenkins. 2 seconds will be safer.

Closes gh-3791

* Build: Remove package-lock.json, add it to .gitignore

npm 5, even the version included in the latest Node.js 8.5.0 re-generates
`package-lock.json` on each install. And when it does on a system that doesn't
support all the optional dependencies that are supported on the OS where the
lockfile was generated, it removes those optional deps from the lockfile.

The effect is that everyone firing `npm install` on our repo on any OS other
than macOS will immediately get a dirty state of the repo as the `fsevents`
dependency subtree gets removed from `package-lock.json`. That's a really bad
experience.

This commit removes package-lock.json from the repository and adds it to
.gitignore. We'll start committing the file again once the issue is resolved
on npm's part.

Fixes gh-3792

* Tests: Make Node tests work for paths with spaces in them

Without this patch Jenkins tests fail as jQuery job names there contain spaces,
e.g. "jQuery Core".

Closes gh-3821

* Tests: Add Safari 11 support test results

* Build: Test on Node.js 9

Closes gh-3840

* Tests: Add iOS 11 support test results

* Manipulation: Reduce size by eliminating single-use variable

Closes gh-3851

* CSS: Correctly set support properties with non-default zoom

Fixes gh-3808
Closes gh-3872

* Docs: Create CODE_OF_CONDUCT.md

Close gh-3865

* Tests: Add support for running unit tests via grunt with karma

- Update QUnit to 1.23.1
- Remove unused dl#dl from test/index.html
- Remove unused map#imgmap from test/index.html
- Ensure all urls to data use baseURI
- Add the 'grunt karma:main' task
  - customContextFile & customDebugFile
- Add 'npm run jenkins' script

Close gh-3744
Fixes gh-1999

* Build: Only run browser tests in one Node version on Travis

Ref gh-3744
Closes gh-3894

* Core: make camelCase function available only for internal usage

Close gh-3604
Fixes gh-3384

* Core: adjust data tests to ensure proper camelCasing

- Add back camelCase to the public object (deprecate not remove)
Ref #3384

* Core: deprecate jQuery.now

Fixes gh-2959
Close gh-3884

* Core: deprecate jQuery.proxy (not slated for removal)

Fixes gh-2958
Close gh-3885

* Manipulation: use `.children` to select tbody elements

- selectors beginning with a child combinator are not valid natively.
  This fixes the tests when using selector-native.js

* Attributes: allow array param in add/remove/toggleClass

+30 bytes instead of +182

Thanks to @faisaliyk for the first pass on this feature.

Fixes gh-3532
Close gh-3917

* Ajax: add unit test for getScript(Object)

Fixes gh-3736
Close gh-3918

* Tests: only run ontimeout test if ontimeout exists

Fixes gh-3742
Close gh-3919

* Build: Fix UglifyJS output in Android 4.0; update uglify

- Thanks to @mgol for first pass

Fixes gh-3743
Close gh-3920

* Tests: fix function reference for unbinding

Ref gh-2958

* Build: Remove CRLF line endings to fix builds on Windows

Close gh-3929

* Core: deprecate jQuery.isFunction

Fixes gh-3609

* Event: Move event aliases to deprecated

Fixes gh-3214

* Ajax: Don't process non-string data property on no-entity-body requests

Fixes gh-3438
Closes gh-3781

* Core: deprecate jQuery.isNumeric

Fixes gh-2960
Closes gh-3888

* Tests: fix weird failure in Edge 16 CSS

Fixes gh-3866
Close gh-3932

* Tests: fix weird flaky attributes test in Edge 16

Fixes gh-3867
Close gh-3931

* Core: deprecate jQuery.type

Fixes gh-3605
Close gh-3895

* Tests: fix number of expected assertions in basic core

* Tests: temporarily require sudo access for karma:main on travis

- This should fix the broken travis build on Node 8
- See travis-ci/travis-ci#8836

* Tests: correctly set sudo in travis config, not karma config

* Manipulation: Add support for scripts with module type

Fixes gh-3871
Close gh-3869

* Tests: fix tests in AMD mode

* Tests: ensure that module assertions run on supported browsers

- Also fixes tests for karma, where the URL for the module is different

Ref gh-3871

* Filter: Use direct filter in winnow

for both simple and complex selectors

Fixes gh-3272
Closes gh-3910

* Build: Add "-debug" suffix to name of karma debug tasks

Ref gh-3922
Close gh-3936

* Tests: skip test with invalid selector for selector-native tests

* Release: add new authors to AUTHORS.txt

* Release: update version to 3.3.0-pre

* Build: Updating the master version to 3.3.1-pre.

* Build: Updating the master version to 3.3.2-pre.

@lock lock bot locked as resolved and limited conversation to collaborators Jul 28, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.