1575174 - During resize there sometimes is a gap between the SVG and the embedding/containing element

Status: UNCONFIRMED

(Core :: SVG, defect, P5)

Description

[Tobi Reif]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Open https://tobireif.com/non_site_stuff/for_bug_report_grid_object_svg_gap/example_nested_grid.html .

Actual results:

During resize there sometimes is a gap between the SVG and the embedding/containing element.

One example:
object-element width: 448.667px
SVG width: 448.5px (although the CSS requests width:100%)

Expected results:

Please always ensure precision, so that there won't be any gaps in the design.

I think that precision is feasible - I think that performance will be sufficient on modern hardware.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Jonathan Kew [:jfkthame]]

I think what's happening here is that the bounds of the SVG are being snapped to device pixels. I'm not sure how necessary that is; presumably there are some SVG images that render more crisply if snapped to integer pixel sizes (e.g. imagine an image that includes a thin frame around its edge; this will probably look better if it's device-pixel-aligned rather than arbitrarily placed at fractional-pixel positions).

So I imagine there's a trade-off here, where some examples are improved by pixel-snapping, while others (like Tobi's) may suffer. :jwatt, do you think this is something we should reconsider?

Comment 3

[Jonathan Kew [:jfkthame]]

FWIW, I see similar issues in Chrome and Safari with the example page.

Comment 4

[Sean Voisen (:svoisen)]

I also see this reproducing in Chrome and Safari with the given example. Not sure there is much to do here since we either snap or don't snap, with visual trade-offs in each depending on the circumstances.

Comment 5

[Tobi Reif]

Perhaps there could be a way to let the web developer opt into no-snap? (That would solve the issue in my case, right?)

Comment 6

[Tobi Reif]

FWIW, I see similar issues in Chrome and Safari with the example page.

I had also reported it to the Chromium project:

https://bugs.chromium.org/p/chromium/issues/detail?id=993760
"
Steps to reproduce the problem:

1. Load https://tobireif.com/non_site_stuff/for_bug_report_grid_object_svg_gap/example.html
2. Slowly resize the window
3. Witness the vertical thin white gaps appearing sometimes
   "

... and as Safari issue:

https://bugs.webkit.org/show_bug.cgi?id=200916
"
Open
https://tobireif.com/non_site_stuff/for_bug_report_grid_object_svg_gap/example_nested_grid.html
in Safari (desktop and mobile).

On load respectively during resize there sometimes is a gap (a white line) between an SVG and the embedding/containing element.

One example:
object-element width: 458.31px
SVG width: only 458px (although the CSS requests width:100%)
"

Comment 7

[Tobi Reif]

Not sure there is much to do here since we either snap or don't snap, with visual trade-offs in each depending on the circumstances.

It would be great if there would be a way to let web developers choose between rounding/snapping versus precision:
https://github.com/w3c/csswg-drafts/issues/4328

Comment 8

[Jonathan Watt [:jwatt]]

I think we could do something better, but to be honest this isn't going to get to the top of the list of things to do any time soon. :/

Comment 9

[Tobi Reif]

Thanks for your reply!

I guess that the rationale for all the rounding was performance. But by now, tens of years later, hardware has evolved dramatically and most likely can handle floats for positioning in layouts.

Please switch to assigning high priority to rendering quality and more specifically to precision - I'm confident that it's feasible by now, performance-wise.

From my point of view as a web developer this is overdue and urgent. Getting rid of the gaps (without workarounds) is important.

Comment 10

[Tobi Reif]

I hope that this can get fixed.