I am using this CSS background image to display a tiling pattern on my DIV.

```
background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px);

```

In the background a framework is used (react-grid-layout) that maps these tiles accordingly. Based on the values in the React Grid Layout I calculate the mapped tiles (length and width) and the result is a point value. This length and width I use with background-size to display the correct tile size visually.

```
background-size: 12.4016px 12px;

```

With Google Chrome, this is not a problem and results in the right representation of the underlying grid. Under Firefox, the tiles are distorted. Is there a solution for this?