Centering of elements with odd pixel width / height looks off

[pchiusano]

http://share-elm.com/sprout/53fe3a0ee4b0d19703e96be3

I expect this code to generate a white square with a 1 pixel black border, as I'm adding an extra two pixels to the width and height and placing a white spacer in the center:

import Window

main =
  let inner = color white (spacer 30 30)
      bordered = container (widthOf inner + 2) (heightOf inner + 2) middle inner
              |> color black
      layout (w,h) = container w h middle bordered
  in layout <~ Window.dimensions

Instead, I get, on Chrome:

This is latest Chrome build 36.0.1985.143. This is a Macbook Air with a non-retina display. Specs.

On Safari, there seems to be a similar issue, but it's not noticeable unless I zoom in:

And in Firefox, it looks like what I expect, even on zoom:

[pchiusano]

Nevermind, I'm closing this. Turns out I had my browser zoomed in to 110%, which I'm guessing was generating some pixel rounding error!

[pchiusano]

I am reopening this, as it still is generating problems for me, when the element I am adding an outline to is an odd number of pixels. See this test, which adds borders to square spacers of sizes [20..30]:

http://share-elm.com/sprout/53ffaf8de4b0d19703e96cf6

I actually could not figure out an obvious way of adding a 1 pixel border to an element whose width and/or height is an odd number of pixels, even after trying various hacks. :(

[Apanatshka]

from the mailing list discussion:

I think this is a bug that's been around for a while. I remember the workaround: http://share-elm.com/sprout/54003315e4b0d19703e96d25
The cause of the bug is in the CSS transform being used on the inner div. It should apparently be rounded up, not down.

I think the bug and workaround was originally found by Eugen (7gui project).

[evancz]

Not sure if this is still relevant, but I am trying to make all the issues here directly about elm-compiler. If you can reproduce this please open an issue or PR on elm-lang/core

Mentioning elm-lang/core#332 so folks can find this more easily.