"Continued" To catch a Firefox pigtail, JQuery said not to take the blame, chrome,edge,ie8-11 continue to onlookers

Introduction

Yesterday I sent an article "grab a Firefox pigtail, onlookers crowd: Chrome, Edge, ie8-11", mentioned a lot of Firefox version of the problem, and the same test page in Chrome, Edge, ie8-11 under all normal.

In the comments, the Netizen @Blackheart reply aroused my attention:

I have to follow the method provided by netizens to re-test a bit:

<! DOCTYPE html>
Show the effect in Firefox:
Show the effect under Chrome:
The hint in 181px instead of 200px, which is perfectly correct:

 
 

  
  
 
   
The Jquery.height function does not contain padding, border, and margin.
 
   
Under Box-sizing:border-box, the values set by Style.height are those that contain padding and border.
 
  
 
 
The difference between the two is reflected in the height of the final set of fieldset:
$ (' #fieldset1 '). Height (200);
document.getElementById ("Fieldset1"). Style.height = "200px";
　　
Of course, the difference between these two settings is not the focus of our discussion in this article. But it is the key to the problem, the following analysis of the jquery source code will use this knowledge.
The problem seems to be really gone, there is a moment, I almost would like to throw Firefox problems to JQuery, but it is true?
Dive into JQuery source code
As the saying goes: Nothing ventured, nothing gained, we have to debug a jquery.height function.
Although 10 years of jquery, but really to debug jquery code, but not a few times, after all, jquery code is a thoroughly tempered, nit-picking to find a bug is difficult.
This time there is no way, since the suspicion here had to start:
1. Entry function
2. First enter the style function:
3. Enter the Set function
Now, if we're going to execute the augmentwidthorheight:
Get a negative value, through the front face jquery.height introduction We know that Jquery.height (200) is not included padding and border, and ultimately to pass $ (' #fieldset1 ') [0]. Style.height to set, so we need to calculate the fieldset up and down padding and border.
4. Enter the Augmentwidthorheight function:
This is a testament to our previous assumptions, by using the JQUERY.CSS function to get the paddingtop,bordertopwidth,paddingbottom,borderbottomwidth four values.
5. Finally go back to the style function:
At this point value is already calculated value, which contains the user to set the 200px, and up and down padding and border 17.6px, total 217.6px
The 217.6px is set to the FieldSet node by style[name] = value:
At this point, let's take a closer look at the next three variables, which, in plain words, mean the following code is identical:
document.getElementById ("Fieldset1"). Style.height = "217.6px";
That is strange, since Jquery.height is finally also called style.height, why directly with the Style.height setting is no problem?
Full re-offer
At first, I suspected that Try-catch was a ghost, and later found it was not. In accordance with Jquery.height's call flow, we'll recreate it ourselves:
<! DOCTYPE html>
You can reproduce the problem under Firefox:
Simplify the following code:
<! DOCTYPE html>
Firefox problem still exists, it is obvious in the JQUERY.CSS problem, tracking the source code of JQuery:
Plainly, it is also very simple. by Styles.getpropertyvalue (name) | | Styles[name] to get the value of a CSS style.
Next, update the example again to get rid of JQuery's related code:
<! DOCTYPE html>
Firefox problem still exists, and this inside we set fieldset height is useless to jQuery, just call the system Getcompotedstyle method, etc.!!
An advertisement in the middle:
#######################################
# 9 years to do one thing
# The Fineui Control Library, built on Sansheng Stone, is now supported with ASP. NET Core 2.0, which is available for cross-platform Windows, Macs, and Linux!
# Online Example: http://core.fineui.com/
########################################
Advertising is over, please continue ....
The above is not the simplest, the following we completely exclude jQuery from the page, 3 lines of code can reproduce the problem:
<! DOCTYPE html>
　　
Compare the results in Chrome and Firefox (behind Chrome, Firefox in the front):
Summary
Indeed, this is Firefox Quantum (v57) and a lot of the old version of the bug, and jquery does not matter, jquery only do the things that do, happen to encounter this Firefox bug.
This bug is reproduced under Firefox to meet the following conditions:

 
     

  
      
 
       
Set CSS Global properties: Box-sizing:border-box
 
       
The HTML tag is: fieldset (no problem with other tags, such as div is normal)
 
       
FieldSet Absolute Positioning: Position:absolute
 
      
 
     
In these 3 conditions, call JS code window.getComputedStyle (elem) ["Paddingtop"] and then set the fieldset label height, the page will not be updated!
Solution Please see my previous article: "Original" Grab a Firefox pigtail, onlookers are: Chrome, Edge, ie8-11
Click to praise
Like-Stone's article, you give a recommendation Bai!
"Continued" To catch a Firefox pigtail, JQuery said not to take the blame, chrome,edge,ie8-11 continue to onlookers