Headings not rendering properly in Design View

When using em or % sizes in CSS, the headings are not rendering properly in Design View (RH 2015).

This can be reproduced very easily: Create a new empty project, edit default.css and make the following settings:

h1, h2, h3, p {

    font-family: Arial;

    font-size: 100%;

}

Now headings 1, 2, 3, and paragraphs should all be displayed in the browser's default font size (normally 16px).

In the topic preview (and in all modern browsers), this is exactly the case:

However, when looking at the same topic in Design View, all headings are displayed in different sizes, and all of them are too large:

It seems that the Design View is ignoring the font-size % statement and uses fixed inherited sizes instead.

With 1em instead of 100%, the behaviour is exactly the same.

As a result, I am unable to use % or em sizes in my RH project because the headings appear in ridiculously blown up sizes. (In the example above, they don't, but normally you would use something like 180%, 150%, 120% for the headings).

This is very unpleasant, as using % or em is state-of-the-art for responsive design. Can you please fix this or provide a workaround? Using px sizes is not a workaround 😉