Closed Bug 1432539 Opened 2 years ago Closed 2 years ago

Circle in SVG not centered correctly

Categories

(Core :: SVG, defect, P3)

58 Branch
defect

Tracking

()

RESOLVED DUPLICATE of bug 608812

People

(Reporter: jason.chen, Unassigned)

Details

Attachments

(3 files)

Attached file svg_circle_center.html
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

Open the file


Actual results:

The circle is centered vertically, but not horizontally.


Expected results:

The circle should be centered vertically and horizontally, with 1px (closest-distance) between the circle and each line. This is what we observe when we remove the margins from the "section" tag.
Priority: -- → P3
The original testcase only reproduces the issue at certain window-sizes. I'm pretty sure it's dependent on having a particular fractional pixel margin (which "margin-left:auto" may or may not produce, depending on the container size, i.e. the viewport size in this case).
Here's a testcase with a CSS Animation.

EXPECTED RESULTS: Circle-in-a-box should move atomically.
ACTUAL RESULTS: Box and circle move in a ping/pong alternating way.
(Chrome gives EXPECTED RESULTS, FWIW.)

I suspect this might be because we "pixel-snap" SVG <line>s (to ensure they aren't drawn at half-pixel positions and end up as fuzzy blurs with two columns of half-shaded pixels) -- whereas for more complex shapes like a circle, we don't pixel-snap because they're inherently drawing lines across/between pixels regardless.

(This is a guess -- I know we do this pixel-snapping for CSS Borders, and I'm not sure about SVG <line>s, but I wouldn't be surprised if we do that.)
Status: UNCONFIRMED → NEW
Ever confirmed: true
(In reply to Daniel Holbert [:dholbert] from comment #3)
> (Chrome gives EXPECTED RESULTS, FWIW.)

(Though Edge gives ACTUAL RESULTS -- i.e. they match Firefox here.)

Anyway -- I think this is effectively a duplicate of bug 608812 -- this is a problem when the outer <svg> itself is positioned at a fractional coordinate.  If, per bug 608812, we snapped the outer SVG's coordinate space to be at an exact pixel value (as we do for e.g. <iframe> as I recall), then this would be fine.
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 608812
You need to log in before you can comment on or make changes to this bug.