1572451 - calc with font-size doesn't work in specific circumstances

Status: RESOLVED DUPLICATE of bug 1572738

(Core :: CSS Parsing and Computation, defect, P3)

Description

[mailnew4ster]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Steps to reproduce:

I used the following CSS (simplified):

body {
  font-family: Verdana;
  font-size: calc(150% - 1.8vw);
}

JSFiddle: https://jsfiddle.net/yj7zw1sx/

Actual results:

Text size doesn't change when I resize the viewport.

Expected results:

The text size should change, as it happens in Chrome, IE and Edge.

Comment 1

[Florencia Di Ciocco, NI to vbalducci]

Hi,

First of all, thanks so much for giving me a full code :) But could you please be more clear on the steps to reproduce? What do you mean when you say "resize the viewport"? If you have a screenshot, that goes a long way.

Thanks in advance, Flor.

Comment 2

[mailnew4ster]

Attachment: demonstration.gif

Comment 3

[mailnew4ster]

I hope that the demo gif makes it clear. The bug caused a website I'm managing to be unusable in certain window sizes in Firefox, so it's an issue based on production code. As a workaround I replaced font-size: calc(150% - 1.8vw); with font-size: calc(24px - 1.8vw);, which should be the same as long as the default font size is 16px.

Comment 4

[Florencia Di Ciocco, NI to vbalducci]

Hi,

Thanks for the video, NOW i see the bug. I was able to reproduce the bug on the following versions:

release 68.0.1 (64-bit), nightly 70.0a1 (2019-08-13) (64-bit) and Beta 69.0b12 (64-bit).

I've chosen a component. If you consider that there's another component that's more proper for this case you may change it.

Best regards, Flor.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Same root cause as bug 1572738, will fix together.