1434185 - See through line in SVG when getBoundingClientRect -> y is not integer

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[roland]

Attachment: Capture.PNG

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180128191252

Steps to reproduce:

Open this Fiddle: https://jsfiddle.net/1pzs3am0/4/
It is a red div and there is an SVG inside which should fill the top of the container.


Actual results:

There is a 1px see through line at the top of the SVG, so we can see the red box. It should not be there.


Expected results:

The SVG should overlay the top of the red container.

Comment 1

[roland]

It is related with the height of the h2 element above the container. if the line-height of the h2 smaller than 1.4104, but greater than 1.4 then we can see the 1px red line. In that case Firefox report 39.2px height for the h2.

Comment 2

[Robert Longson [:longsonr]]

It's just antialiasing, not a bug, you can turn it off via shape-rendering="crispEdges"

Comment 3

[roland]

:longsonr I do not agree, it is a bug. Other browsers seem fine with that example and shape-rendering="crispEdges" can be only the solution when there is only horizontal and vertical lines in the shape.

Look at this example: 
crispEdges: https://jsfiddle.net/hp1a8ns6/2/
Antialiased: https://jsfiddle.net/uu19ztar/

Do you think the "crispEdges" look fine?