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

Answer 3

vmin is a nice idea for mobile web design, but browser support is limited. Furthermore, the browser support that does exist exhibits some strange behaviors. For instance, because vmin calculates the font size as a function of the current size of the screen, when you focus on a text input element you are going to have trouble because sometimes the text will resize based on the much smaller window you have with the keyboard open. So at times your text input will spontaneously become tiny, which is incredibly annoying. I therefore recommend using vw, to maintain text size based on the width of the screen. It lends itself to a better user experience. vh has the same issue I talked about above.