🌐 AI搜索 & 代理 主页
Skip to content

width/height css set hook causes forced reflows #3991

@jbedard

Description

@jbedard

Description

3fcddd6#diff-414c8f59bff0d1b63680b64763d8c529R370 started invoking the isBorderBox test 100% of the time instead of only when necessary. In my case this causes a series of .css({width}) calls to cause a "forced reflow" (that's the chrome terminology in the performance tool).

Updating the width/height set to avoid computing isBorderBox unless necessary fixes it for me locally, but makes the code a bit uglier:

6582c6582
< 				isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
---
> 				isBorderBox,
6587c6587
< 					isBorderBox,
---
> 					isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
6593c6593
< 			if ( isBorderBox && support.scrollboxSize() === styles.position ) {
---
> 			if ( support.scrollboxSize() === styles.position && (undefined === isBorderBox ? (isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box") : isBorderBox) ) {

However so far I have been unable to reproduce this in jsbin, so there must be another condition that I'm not understanding such as a specific position type on the element or parent element?

Here's an example where a series of ng-style="{width: X}" in AngularJS causes this (and jQuery 3.1 does not cause it):
jq33-reflow

Link to test case

TODO

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions