CSS calc values computed differently on Edge

Asked Jun 12 '19 at 14:31

Active Jun 12 '19 at 14:41

Viewed 208 times

I have this scss code snippet:

@include flex(1 1 calc((1 * (100% + (2 * #{$spec_grid_outerMargin})) / 3) - #{$spec_grid_outerMargin}));

In the dev console of Edge at my local machine this is translated to:

flex: 1 1 calc((1 * (100% + (2 * 1.125rem)) / 3) - 1.125rem)

while on a dev environment (same version as local) it shows:

flex: 1 1 calc((100% + 2.25rem)/3 - 1.125rem)

and on the dev environment this is causing a layout bug. How can it be that this snippet gets interpreted in different ways?

edited Jun 12 '19 at 14:41

Temani Afif

asked Jun 12 '19 at 14:31

GarfieldKlon

note that both are the same, the difference is that the second is doing the multiplication – Temani Afif Jun 12 '19 at 14:37
Did you try to hard refresh it and clear the cache data? It can be possible that it is showing some data from the cache. – Deepak-MSFT Jun 12 '19 at 14:38
Could be a difference between sass compiler versions, or another package that is involved in the build process. – Shahar Jun 12 '19 at 14:48
Cleared cache, doesn't help. sass compiler are the same. – GarfieldKlon Jun 13 '19 at 08:41
But if I change the 2.25rem to 2.2rem it works. But it should behave the same imho. Really don't see the difference in the two layouts. – GarfieldKlon Jun 13 '19 at 08:48
Problem identified. It was webpack that was optimizing the css and it optimized some needed braces away (only in production...) – GarfieldKlon Jun 17 '19 at 10:12

0 Answers0