3

Basically I want to use transformY but the subpixel blur is very annoying and only occurs when the div is an odd height. As the height depends on the text viewport etc, need this to be flexible so realistically need it to get the height of the div - Divide it by 2, round to the nearest number then x 2 so it'd always produce an even value.

Shaeldon
  • 873
  • 4
  • 18
  • 28
MichaelAlmond
  • 31
  • 3
  • maybe the css3 calc function of css can help you. https://developer.mozilla.org/en-US/docs/Web/CSS/calc – albanx Mar 17 '15 at 11:41
  • Take a look at [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) if you were after JS. – lshettyl Mar 17 '15 at 11:42
  • You cant round with `CSS`, you can do this with JS. – somethinghere Mar 17 '15 at 11:54
  • Thought about calc but you need the value to begin, height: calc(auto / 2 * 2); or height: calc(100% / 2 * 2); doesn't work. Wouldn't have a clue where to start with js though... – MichaelAlmond Mar 17 '15 at 11:55

1 Answers1

2

The question is old, but it's the first answer on google for "rounding div height to even number", so it might help others.

You have perfectly identified the issue: translates can cause blur due to result not being rounded to the nearest pixels, so rounding the div height to an even number fixes it.

We can't do it in CSS as it doesn't know yet its final height, so we have to do it after rendering. Using Jquery is a breeze:

$(window).on("load", function() {
    $('div').each(function (index, value) {
        if($(this).height()%2==1) $(this).height( 2*Math.round($(this).height()/2 ) ) ;
    });
});

(of course, same could be done in VanillaJS, with a few lines more)

Explanations

  • $(window).on("load") event is important here, as the final height will be known after final rendering, including image dimensions, that are still unknown when DOM is loaded

  • height %2 ==1 uses modulo operator to check if there's a remainder when dividing by 2 -> odd

  • Then, as you said, rounding it to nearest (upper) even pixel using 2*(round(height/2))

jsFiddle to demonstrate the blur and the fix

arno
  • 507
  • 1
  • 5
  • 15