CODEWITHSUNDEEP
javascripthtmlcsscomputed-stylecomputed-values
Ali Baig
Ali Baig

Reputation: 3867

Same style values, same element but different computed values on same browser

I am working on a chrome extension which returns the font-size property of any element. I am loading the ajax response data into the extension document and computing their properties. Now something strange happening and I'm not being able to find out the reason.

I have a heading tag on the webpage I'm analysing upon. Style tab (inspect element) on the webpage says its font-size is 2em and computed value is 32 pixels.

Now, when i load the same page in my chrome extension, Style tab (inspect element) on my extension says its font-size is 2em but shows its computed style to be 24px. To clarify, I'm attaching the images of styles and computed syles of both webpage and chrome extension.

Case 1: Style (Webpage) Look at the right most side, font-size:2em

Computed Style (Webpage) Computed font-size = 32px

Case 2: Style (After Loading In Chrome Extension) Style: font-size = 2em (similar to what it's on webpage)

Computed Style (After Loading In Chrome Extension) Here is my problem. computed font-size = 24px

I just want to know why is this happening? Same styles (2em) but browser window showing computed size as 32 and extension window (on same browser) showing 24px.

Upvotes: 1

Views: 1103

Answers (1)

rioc0719
rioc0719

Reputation: 303

The problem lies in that em is a relative unit in CSS, which means that an element whose font-size is in ems will base the font-size on its parent's font-size. In your second example, it seems that the body has had its font-size changed to 75%, which you need to change to 100%. The behind-the-scenes calculation that is occuring here is that html's default font-size is 16px, 75% of that is 12px, and twice that (2em) is 24px- the computed font size.

Upvotes: 2

Related Questions