CSS problem with dashed border in Firefox

In Firefox (exclusively as far as I tested), dashed styles in borders show the first and last dash unaligned (also happens with pretty much every other style but solid). Here is the image:

dashed border visual error

The HTML is a table cell with the follwing style:

#theme-field-container td {
    height: 35px;
    background-color: transparent;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px dashed rgb(0, 102, 102);
    padding-left: 6px;
    padding-right: 6px;

}

Funny thing: if I increase the zoom of the browser to 130% or more, it gets fixed. (my screen is 1080p).

Why is this happening? Is it fixable?