Dotted Divider Looks Different on iPad (Safari & Firefox)

How To
1

Hello,

I’m using a divider that’s 10px high and 100px wide with a dotted line.
On my PC (Chrome and Firefox), the dots appear round and evenly spaced.
However, on my iPad (Safari and Firefox), the dots are square and the spacing is inconsistent.

What could be causing this, and how can I fix it?

Best regards
Don.

Bricks-Divider-Vergleich-PC-Mac
Bricks-Divider-Vergleich-PC-Mac1524×638 109 KB

2

seems to be a known bug in webkit

Then the only fix might be faking the line by replacing it with some svg or or…

You can try if you can force some style onto it with CSS, but also the uneven spaced dots gonna make it difficult.

3

Thanks for your help.

I asked chat GPT for a solution.

%root% {
width: 15%;
height: 10px;
background-color: transparent;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘20’ height=‘10’%3E%3Ccircle cx=‘5’ cy=‘5’ r=‘5’ fill=‘black’ /%3E%3C/svg%3E”);
background-repeat: repeat-x;
background-size: 20px 10px; /* Abstand + Höhe */
}

This solves the problem.

BR
DonX

1 Like