1

I tried to use VW and calc together and works but calculated only once: loading time:

http://codepen.io/anon/pen/mJOGbr

html{
  font-size: calc( 16px + 2vw ); 
}

How can I force to evaluate that calc any time the browser window is resized? It is evaluated once, but never again. Without calc, the VM works fine...

Thanks in advance!

user1018074
  • 89
  • 2
  • 9
  • What browser are you testing this in? I can't reproduce it in any browser. – BoltClock May 27 '15 at 09:23
  • possible duplicate of ["vw" CSS units in calc in Chrome not working](http://stackoverflow.com/questions/14182695/vw-css-units-in-calc-in-chrome-not-working) –  May 27 '15 at 09:33
  • Why are you using calc instead of just `font-size: 3vw;`? –  May 27 '15 at 09:35
  • I would like to calculate such things: font-size: calc( 16px + 2vw ); – user1018074 May 28 '15 at 10:13
  • I would like to have 16px for mobiles and 24 for HD screens and linear calculation between the 2 values.... Without media queries... – user1018074 May 28 '15 at 10:13
  • Not a duplication actually. The formula is working now (did not with versions of last year), but not evaluated more than 1. – user1018074 May 28 '15 at 10:14

1 Answers1

2

Note that if you are using an older webkit browser, this problem of not-resizing may occur indeed. See this post. (Scroll to "Bugs!")

The support is there in Chrome 20+ / Safari 6+, but it fails in one rather significant way. When the browser window is resized, the font doesn't adjust itself according to the new viewport size. The spec says:

When the height or width of the viewport is changed, they are scaled accordingly. I bugged it. Perhaps not a huge disaster as it's pretty much just us design nerds that go around adjusting browser windows, but still. The font does adjust on a fresh page load.

To fix this issue (allow resizing without page refresh) you need to cause a "repaint" on the element. I used jQuery and just fiddled with each elements (irrelevant, in this case) z-index value, which triggers the repaint.

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {   causeRepaintsOn.css("z-index", 1); });

UPDATE: Don't worry about this anymore and definitely don't be forcing those repaints. This resizing issue is fixed in Chrome 34+ and Safari 7+. It's not common to change the viewport size on mobile devices, so I'm not sure if this bug ever effected them or not.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239