Font size value scaling with browser zooming

I have found an issue which is causing me some confusion. I have font-sizing set across my CSS file with rem scaling, and a base font size of 16px set in the html{ ... } block in the CSS file.

My Issue

When scaling the browser using the browsers own zoom method (Firefox v46 in this case. I have also done this with Chrome v51) the text on the website changes size just fine, however, various padding and a few other elements have scales relating to the font-size, rem value, yet viewing the computed and source code with Firebug (and with Chrome inspector), does not show a zoom-adjusted computed change in these values in px, even when zoomed.

For example:

CSS:

html,body {
    font-size: 16px; /*the base.*/ 
}

nav {
    font-size: 0.75rem; /* should be 12px */
}

.textBlock {
    font-size: 0.95rem; /* should be 15.2px */
    padding: 0 0.15rem; /* should be 2.4px */
}

Now, when I load the page at 100% zoom, everything shows at scale and all computed values are as commented. But if I increase the zoom, for example to 120%, everything textual on the page increases in size proportionally, (while non-font-size-related elements stay consistent), but then reading the page source with firebug, it still tells me that:

code view:

html, body {
    font-size: 16px; 
}   
.textBlock {
    font-size: 0.95rem; 
    padding: 0 0.15rem; 
}

Computed results

font-size: 15.2px (in textBlock).
padding: 2.4px (in textBlock).

I want to be able to view the computed size of the elements on the page taking into account the zoom value .

I was under an impression that by changing the zoom of the browser that it altered the body (or html) element base font-size, so that 1rem computed value changes from 16px to 17.5px (for example), and that due to this all related child elements would scale appropriately.

The fonts do scale but I as a browser user I get no feedback on to the current output size of the font based elements on the page.

Further Testing

Using javascript (from this answer) also tells me font size is 16px in the main body, regardless of zoom.
Deleting the body font size does not change anything.
Setting the base body font size to a rem/em value also does not change the feedback given by Firebug, Javascript or Chrome Inspector.

Why don't I read the other font-size questions on StackOverflow

All other (and there are quite a few) font sized questions that I've found relate to people putting static values such as 14px as their element sizes and expecting them to scale.
I can find no useful literature (since 2008/09) about how the browsers actually work the zooming mechanism and how developers can work with this tool.

What Am I trying to achieve/find

I want to be able to view the webpage at any browser zoom level and be able to detect and get feedback telling me the size of the font-size value on various elements, such as:

Zoom 120% on .textBlock [computed] {
    font-size: 18.24px; /* (16px * 1.20) * 0.95 */
    padding-left: 2.88px; /* (16px * 1.20) * 0.15 */
    padding-right: 2.88px; /* (16px * 1.20) * 0.15 */
}

This is more important in my own case for measuring paddings as they're often also rem based in my situation (I am finding that some elements are overflowing due to browser zoom not being 100%). But regardless of my own requirements, I am very surprised that I can't seem to find the computed values I would feel would be pretty basic to need. I want to fix this (and to be honest I can fix my own CSS easily enough, but I wanted to get feedback from reading what the computed font size is, after zoom, but found the issue I post here).

Basically, I want to be able to get quantitive feedback of computed CSS values from a website based on the browser zooming value, of the rem scalar value.

Are there Any solutions to this?

Solution

First of all, the rem unit is related to the root element, i.e. html, therefore, changing font-size on body does not have any effect on the descendant elements.

Firebug and the other developer tools display the computed values according to the W3C specification. More precisely, they use the window.getComputedStyle() function to get the computed value and this function does not take the zoom level into account.

To get the actual font size, you need to calculate it yourself. How you do that is described by Tom Bigelajzen. He also created a script to detect the zoom level.

With it you should be able to calculate the actual font sizes by multiplying the computed font size with the zoom factor:

var cs = window.getComputedStyle(element);
var actualSize = Number.parseFloat(cs.fontSize) * detectZoom.zoom();