Scaling results in gaps between CSS shapes

Question

I have a series of CSS hexagons. I would like to apply CSS scale transform for different viewport widths, though gaps are appearing within my hexagon shapes.

This problem is most evident on Firefox at any scale value. It also appears in Chrome if scaled to non-integer values. Firefox additionally shows baffling horizontal lines in the :before and :after pseudo elements, though these lines are in the centre of a border and not at the edge of any shape.

Snippets

A simplified version of my markup and styles is below, and also on JS Fiddle.

HTML:

<div class="scale">
    <div class="hex"></div>
</div>

Styles:

.scale {
    margin: 8em auto;
    text-align: center;
    -webkit-transform:scale(2.5, 2.5);
   -moz-transform:scale(2.5, 2.5);
    -ms-transform:scale(2.5, 2.5);
     -o-transform:scale(2.5, 2.5);
        transform:scale(2.5, 2.5);
}
.hex {
    position: relative;
    display: inline-block;
    margin: 0 30px;
    width: 60px;
    height: 104px;
    background-color: #000;
    &:before, &:after {
        position: absolute;
        width: 0;
        border: 1px solid transparent;
        border-width: (52px) (30px);
        content: "";
    }
    &:before {
        border-right-color: #000;
        right: 100%;
    }
    &:after {
        border-left-color: #000;
        left: 100%;
    }
}

Screenshots (Linux Mint)

Chrome: scaled at x2 (no gaps evident at integer values)

Firefox: scaled at x2 (gaps, plus horizontal lines)

Is there help?

My guess is that these lines are appearing because of some numerical rounding, but I really am out of ideas. Is it possible to fix this? Is there another approach I could use for this scaling? Thanks in advance for any responses.

Answer 1

I am a bigger fan of using top/bottom methods of creating hexagons, because they're just very simple. Check out the one I threw in your jsfiddle.

Just fix up the actual measurements and the method I used should get rid of your problem.

    .hexagon{
        margin-left: 8em;
        height: 4em;
        width: 4em;
        -webkit-transform:scale(2.5, 2.5);
       -moz-transform:scale(2.5, 2.5);
        -ms-transform:scale(2.5, 2.5);
         -o-transform:scale(2.5, 2.5);
            transform:scale(2.5, 2.5);
        position: relative;
    }
    .top{
        top: 2em;
        border-bottom: 2em solid black;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
    }
    .bottom{
        top: 4em;
        border-top: 2em solid black;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
    }

Answer 2

It seems to be a scaling bug as the gaps seem to stay when the item is transformed by other means, such as rotation.

The best way I can get around it is by adding the element to the .hex class instead of the .scale class, and repositioning. I hope this helps to lead you toward a better solution.

Good luck!