Vaadin 7 + MPR significant visual difference for same app between 4 browser

Flow
1

Hello,
I am running a Vaadin 7 app with MPR. What is confusing me is that, at least for production mode, it looks quite different visually between the browsers. Pictures below. This is the exact same app, run within minutes of each other. Only Chrome looks exactly like the original non-MPR Vaadin 7 app. Any ideas?

Update:
One thing I did not mention above: I am using a custom legacy theme, so @MprTheme(“mytheme”). Don’t know if that impacts things or not.

![Chrome]
(https://i.postimg.cc/029zqDDf/Chrome-Repl-Order-Mgmt-Mpr.png)

Figure 1: Chrome

![Firefox]
(https://i.postimg.cc/qBSCyPdt/Firefox-Repl-Order-Mgmt-Mpr.png)

Figure 2: Firefox ( has title bar and left edge, nothing in content section )

![IE]
(https://i.postimg.cc/R0gRcv9r/IERepl-Order-Mgmt-Mpr.png)

Figure 3: IE ( does not have title bar, does have something in content section, has scroll bar at bottom )

![Edge]
(https://i.postimg.cc/FHdNtHWp/Edge-Repl-Order-Mgmt-Mpr.png)

Figure 4: Edge ( does not have title bar, does have something in content section )

Clarification on above: I am running against a war file produce using mvn clean package -Pproduction, so a production mode war file, as defined https://vaadin.com/docs/v13/mpr/configuration/production-mode.html.

Update: When I run it against dev mode war instead of production mode war, so created with mvn clean package, I get the title bar with IE, but still have a scroll bar at the bottom. No change for Edge, Chrome, or Firefox.

Could this be fixed in Vaadin 14 when it gets officially released? Do I need to give more information, or different information, in order to help solve this?

2

Since upgraded to Vaadin 14 RC3, which did not help. Then I changed a VerticalSplitPanel to a VerticalLayout ( see https://vaadin.com/forum/thread/17762823/17774740 ), and that fixed at least some issues. Now, as far as I can see, Chrome and Edge look almost the same. Still confused, but this at least partially answers my question.

As for Firefox and IE, they are still not working in an ideal way. Screen shots below, and I include all browsers for comparison. I am running it with mvn jetty:run-exploded -Pproduction.

![Chrome example]
(https://i.postimg.cc/MGSddW99/Chrome-Vertical-Layout.png)

Figure 1: Chrome, looks perfect

![Firefox example]
(https://i.postimg.cc/9fkHDwmD/Firefox-Vertical-Layout.png)

Figure 2: Firefox, not that the search form does not fill the panel like Chrome and Edge do.

![IE Example]
(https://i.postimg.cc/4xn8mLm1/IEVertical-Layout.png)

Figure 3: IE, note scrollbars on side for entire browser window, and at bottom for entire browser window

![Edge Example]
(https://i.postimg.cc/XYznCzxN/Edge-Vertical-Layout.png)

Figure 4: Edge, looks exactly like Chrome, except for the upper left corner blue background behind a title ( that is kind of weird, but minor problem )

Also, as another example, of a different screen:

![Chrome dashboard]
(https://i.postimg.cc/pXvyc1wX/Chrome-Dashboard.png)

Figure 5: Chrome dashboard, looks good ( not showing Edge since virtually the same )

![Firefox dashboard]
(https://i.postimg.cc/P5RXH6RD/Firefox-Dashboard.png)

Figure 6: Firefox dashboard, note that dashboard does not fill screen like it does for Chrome

![IE dashboard]
(https://i.postimg.cc/FRv2X3Nc/IEDashboard.png)

Figure 7: IE, note scrollbars at side and bottom for whole browser