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

Question

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)

Computed Style (Webpage)

Case 2: Style (After Loading In Chrome Extension)

Computed Style (After Loading In Chrome Extension)

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.

Answer 1

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.