hr with 1px border-width and dashed style is not evenly spaced

NEW
Unassigned

Status

()

Core
Layout
14 days ago
14 days ago

People

(Reporter: karlcow, Unassigned)

Tracking

55 Branch
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(firefox55 affected)

Details

(Whiteboard: [webcompat])

Attachments

(1 attachment)

(Reporter)

Description

14 days ago
Created attachment 8857769 [details]
hr test firefox safari

When we use border to created a dashed hr, the border is drawn unevenly around the box, creating a wavy effect, not beautiful to the eye. This issue happens only for borders at 1px. When the width is larger the drawing is regular and evenly spaced out.


Tested with Firefox Nightly 55.0a1 (2017-04-10) (64-bit)
Created a test case http://codepen.io/webcompat/pen/VbwGaW
This is a spin-off of the Webcompat issue https://webcompat.com/issues/5616

Simple markup to reproduce
<hr style="width: 200px; border-width: 1px; border-style: dashed;">

Screenshot attached.
Firefox on the left, Safari on the right.
(Reporter)

Updated

14 days ago
Flags: webcompat?
Whiteboard: [webcompat]
You need to log in before you can comment on or make changes to this bug.