in css, using the vmin/vmax attribute when page size changes

Question

using the new vmin css property to get the right font size. works absolutely great!

div.sample { font-size: 1.5vmin; text-align: center; ... }

the problem occurs when the page is resized. for example, if the page is made smaller, the font-size is unchanged, making everything out of kilter.

first, is the browser supposed to handle this?

second, what's the best way to handle it? it seems that if I use a trigger to set the font-size, then I would need to know the font-size values in javascript as well as the css, creating a situation bound to fail.

Answer 1

It looks like vmin is behaving in Firefox.

Here's a jsfiddle I made for testing: http://jsfiddle.net/noahcollins/Sc8gm/

It sounds like you're seeing the issue in chrome? As Bazzz pointed out, there's a Chrome bug that's still open. I was able to replicate it in Canary. The CSS Tricks article can help you get around it with some javascript if you're so inclined.

Another thing to keep in mind: support for vmin in mobile browsers is very limited at this time, so it will be an issue in the case when users rotate between portrait & landscape.

Answer 2

Supposedly that's a known bug, as stated by CSS-Tricks. They also have a javascript workaround, have a look here under the head "Bugs!":

http://css-tricks.com/viewport-sized-typography/

suggested workaround by CSS-Tricks

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);
});