[grid] Double row borders with Aura background color

[sissbruecker]

Description

In certain configurations it looks like there is a double row border using the Aura background color. In this case it comes from rendering an icon into a column:

It's more noticable with a pronounced background color:

Expected outcome

The Aura background should not bleed into the Grid.

Minimal reproducible example

    <script type="module">
      import '@vaadin/grid/all-imports';
      import '@vaadin/icon';
      import '@vaadin/icons';

      const grid = document.querySelector('vaadin-grid');
      grid.items = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }, { name: 'Diana' }];

      document.getElementById('icon-column').renderer = (root) => {
        root.innerHTML = `<vaadin-icon icon="vaadin:check"></vaadin-icon>`;
      };
    </script>

    <vaadin-grid item-id-path="name" all-rows-visible>
      <vaadin-grid-column path="name"></vaadin-grid-column>
      <vaadin-grid-column id="icon-column"></vaadin-grid-column>
    </vaadin-grid>

Steps to reproduce

See above

Environment

Vaadin version(s): 25

Browsers

No response

[yuriy-fix]

Let's find the underlying issue.

[vursen]

The root issue is that the virtualizer rounds up translateY values. When the row height is fractional, this rounding produces the observed result. The issue is even more noticeable if the grid uses a custom background, e.g. style="--vaadin-grid-background: red":

Using <vaadin-icon> results in a fractional row height because it's set to vertical-align: middle. @jouni made an attempt to fix this by switching to baseline in https://github.com/vaadin/web-components/pull/10554, but this didn't end up working perfectly with font icons.

We could still make this change, arguing that it fixes the default Vaadin icon set while leaving font icon alignment up to the developer. However, it will be good to still verify that it doesn't make popular font icons such as Font Awesome look too misaligned.