1762108 - 1PX line between <svg> and <div> on https://wearexena.com/ only present in Firefox

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Gregory Pappas [:gregp]]

Attachment: firefox_and_chromium.png

Steps to reproduce:

1. Navigate to https://wearexena.com/
2. Scroll to carousel under "Get to know our community"

Actual results:

1px line between photo and testimonial

Expected results:

No 1px line between photo and testimonial

Comment 1

[Timothy Nikkel (:tnikkel)]

Reduced testcase would be useful here.

Comment 2

[Gregory Pappas [:gregp]]

Attachment: reduced.html

Reduced test case

Comment 3

[Gregory Pappas [:gregp]]

Attachment: even_more_reduced.html

Reduced it more

Comment 4

[Lee Salzman [:lsalzman]]

Nical, in the even_more_reduced testcase, it looks like this might be an SVG thing?

Comment 5

[Alice0775 White]

I can also reproduce it on a 10 year old Firefox 10 (2012) on Windows 10.

The glitch disappear or appear when zooming in or out.

Comment 6

[Nicolas Silva [:nical]]

The svg has a non-integer size, it looks like chrome snaps the size in such a way that the path lands exactly on the pixel grid as well so there is no antialiasing going on. Firefox on the other hand appears to be snapping (or maybe not snapping, or dealing wth the transform) differently.
I don't know enough about the details of the SVG/CSS spec to tell what we are supposed to do or if it says anything about it.

Marcus any idea?

Comment 7

[Markus Stange [:mstange]]

This is an interesting case.

I think the author can reasonably expect seamless drawing here: Both the path and the black background have their right edge at (almost) the exact same CSS pixel position. Running the following in the console on attachment 9269997 [details] I get:

document.querySelector("path").getBoundingClientRect().right
722.5000152587891
document.querySelector(".testimonial-large__item-image-inner").getBoundingClientRect().right
722.5

So since there's a seam, this must be because we're snapping inconsistently in one way or another. Consistent snapping is hard and sometimes impossible to pull off, but clearly Chrome is making a better trade-off here.

So let's go through it step by step:
The black background has its right edge snapped because it's just a div with a background color. Regular background colors are always snapped.
SVGs are usually not snapped, unless they're used as <img> or CSS background images. But this is an inline <svg>. So the contents are drawn with anti-aliasing.
So, if the right edge of these two elements falls on a fractional position, then I would actually expect a seam, because you're lining up something snapped with something anti-aliased.

If the right edge of these two elements does not fall on a fractional position, then I would not expect a seam in Firefox. However, we do seem to create a seam even in that case, sometimes: On a @1x display with 100% zoom, if I change the width: 50% to width: 702px, I still get a seam.

document.querySelector(".testimonial-large__item-image").style.width = "702px" 

In this case, the background color snapping doesn't change the right edge position. But something must be happening with the SVG (possibly involving the viewbox transform) which causes drawing to be blurry and not line up properly.