vaadin-grid 3.0.2 rendering/scrolling issues in Firefox

Flow
1

Hello,

I have a small demo repository

https://github.com/alrossi/vaadin-issues

which illustrates some issues we have encountered in using the vaadin-grid table. The problems seem to be confined to Firefox.

Briefly, Firefox seems to take an inordinate amount of time to render a page which Safari and Chrome have no problem with.

Also, scrolling in Firefox is very jittery and often produces phantom or empty rows, something I have not seen in the other two browsers.

If this is an issue which is well known or has been addressed already, might you kindly point me to the relevant discussion?

Otherwise, please have a look at the examples in my GitHub repo.

Thank you!

Al Rossi

2

Hi Albert,
Since you’re using Polymer 2 in your project, would it be an option for you to upgrade to a newer grid (4 (stable) or 5 (beta)) instead of the hybrid version 3? Running bower install vaadin/vaadin-grid#^5.0.0 (and resolving with the newest versions) in the root of the example project makes the page load significantly faster on Firefox.

3

Tomi,

indeed moving to #^5.0.0 solves the problem, it seems, at least for the demo snippit.

I will reset the resolution on the main project and see if anything breaks, but if not, this upgrade should do the trick.

Thanks,

Al

4

Tomi,

After installing the upgrade, I immediately see that our build breaks because it relies on components (such as vaadin-grid-cell-click-behavior) which are no longer there.

This will not be a seamless fix, then.

Is there any other option?

Thanks again, al

5

There’s always the option of copying the vaadin-grid-cell-click-behavior sources from grid 3 to your project and using that. G5 sure has a similar mixin but like vaadin-grid-cell-click-behavior, it’s an internal/private grid module so it should not be depended to via grid sources.

6

I’d rather not do something like that because it makes code maintenance complicated.

What is still unclear to me is whether my project example has indeed uncovered issues in vaadin-grid 3.0.2, and if so, whether this problem with Firefox has been understood (though perhaps manifested in a different way) and is solvable using the pre-5.0.0 version. (A different possibility is that my code could also be doing something intrinsically wrong … though at the moment I am not sure what that would be.)

While it is desirable eventually to move to 5.0.0, I need to be able to backport a fix, if possible, to a stable branch, which would mean avoiding an upgrade of a dependency when it requires significant code restructuring.

7

Hi again Tomi,

I’ve decided to look into migrating my code to the more modern grid implementation. I think I may be able to do without the cell click behavior by just attaching a normal listener. However, I am now seeing that the styling of the table needs to be done differently. I don’t see any documentation for what to do in 4+, but I would like to maintain the old styling if possible (it has now disappeared).

For instance, as in the demo I provided, something like this:

vaadin-grid {
                position: relative;
                height: 100%;
                -webkit-font-smoothing: antialiased;
                --divider-color: #d4d4d4;

                --vaadin-grid-cell: {
                    padding: 0 8px;
                    height: 32px;
                    border-right: 1px solid #d4d4d4;
                    box-sizing: border-box;
                    font-size: 8pt;
                    cursor: default;
                };

                --vaadin-grid-header-cell: {
                    height: 36px;
                    border-bottom: 1px solid #d4d4d4;
                    background-image: linear-gradient(to bottom, #fafafa 2%, #efefef 98%);
                    font-size: 9pt;
                    text-style: bold;
                    text-align: center;
                    cursor: default;
                };

                --vaadin-grid-body-row-odd-cell: {
                    background-color: #f5f5f5;
                };
            }

How can I now achieve this?

Thanks again,

Al

8

It looks like only the styling is now an obstacle. I have looked at the comments on the table element but I cannot get the above to work. I prefer to retain the style I have already devised. It would be really helpful if you could indicate to me what I need to do to migrate the css mixins that were once available (as above) so that they now work with 4.1.7.

Al

9

CSS mixins are no longer used (as they are not on a standards track anymore, so we don’t want to depend on them). You need to use special style modules instead, that “inject” CSS inside the shadow DOM.

Here’s the proper documentation: https://github.com/vaadin/vaadin-themable-mixin/wiki

And here’s an example, migrating your styles to the new syntax. Place it in one of your HTML imports. I didn’t test it, though, so might contain bugs:

<dom-module id="my-grid-styles" theme-for="vaadin-grid">
	<template>
		<style>
			:host {
				position: relative;
				height: 100%;
				-webkit-font-smoothing: antialiased;
			}
			
			[part~="cell"]
 {
				padding: 0 8px;
				height: 32px;
				border-right: 1px solid #d4d4d4;
				box-sizing: border-box;
				font-size: 8pt;
				cursor: default;
			}

			[part~="header-cell"]
 {
				height: 36px;
				border-bottom: 1px solid #d4d4d4;
				background-image: linear-gradient(to bottom, #fafafa 2%, #efefef 98%);
				font-size: 9pt;
				text-style: bold;
				text-align: center;
				cursor: default;
			}

			[part~="body-cell"]
[odd]
 {
				background-color: #f5f5f5;
			}
		</style>
	</template>
</dom-module>

Update: the --divider-color is something you need to override manually for the cells.

10

Jouni,

Thank you very much for the leg up here. I’ve just started familiarizing myself with the newer way of handling this and your example is very helpful. I see now how it is also applied inside the vaadin-grid components.

Best, Al

11

Jouni,

I hate to be such a nuisance, but I have one last question. In the example you gave, you styled the body-cell for the odd attribute. The vaadin-grid documentation, however, states that this is an attribute of row.

https://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin.GridElement

Either way, I cannot seem to achieve the row striping effect (all the internal rows/cells have the same background).

Is there something else missing here?:

		[part~="row"]

[odd]
{
background-color: #f5f5f5;
}

Sorry to pester,

Al

12

Hi again,

the striped even-odd rows is not the only problem I have now encountered moving from 3.0.2 to 4.1.7.

It seems that on page load the table provider gets called multiple (I count about 5) times. I have a provider which does lazy loading from a RESTful service (paged), and this is messing things up because these multiple calls all ask for the initial page number + page size.

Is there a way to avoid having the provider called multiple times like this (i.e., before one even scrolls)?

Thanks, Al

13

Ah, it’s being called every time a filter is set on the table (during load) – filterChanged – and there are 6 table column filters, so it is called 6 times.

I am setting the provider in connectedCallaback. Is there a way of delaying this until the entire table is built?

14

About the styles – yes, sorry for the error (like I said, might contain bugs :)).

Here’s the correct selector for odd rows (the “odd” attribute applies to the row part and not the cells):

[part~="row"]
[odd]
 [part~="body-cell"]
15

If found where the issue is. I believe I can fix it …

16

I have opened a separate thread on the remaining issues I have encountered.

https://vaadin.com/forum/thread/17026942