Vaadin Flow view messed up in Safari browser

Rabeet · June 8, 2019, 5:37am

Hi,

I have a Vaadin 13 application running but the view I see is messed up on Safari but fine on Chrome and Firefox. Please see screenshots below:

Safari:

Chrome:

This is the code for the layout:

package com.rabeet.spring.Vaadin;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@Route(value = "", layout = RouterLayout.class)
@PageTitle("GC Insights App")
public class HomePageView extends VerticalLayout {

    private Dialog tutorialDialog = new Dialog();

    public HomePageView() {
        HorizontalLayout layout = new HorizontalLayout();
        HorizontalLayout[] inners = new HorizontalLayout[3]
;

        for (int i = 0; i < inners.length; i++) {
            inners[i]
 = new HorizontalLayout();
            inners[i]
.setHeight("100px");
            inners[i]
.setWidthFull();
            inners[i]
.getStyle().set("border", "1px solid #9E9E9E");
            inners[i]
.setJustifyContentMode(JustifyContentMode.EVENLY);
            inners[i]
.setDefaultVerticalComponentAlignment(Alignment.CENTER);
            inners[i]
.setPadding(true);

            layout.add(inners[i]
);
        }

        H3[] h3Label = new H3[3]
;
        h3Label[0]
 = new H3("83,196 measurements");
        h3Label[0]
.getStyle().set("color", "#FFFFFF");
        inners[0]
.add(new HorizontalLayout(h3Label[0]
));

        h3Label[1]
 = new H3("2,771 features");
        h3Label[1]
.getStyle().set("color", "#FFFFFF");
        inners[1]
.add(new HorizontalLayout(h3Label[1]
));

        h3Label[2]
 = new H3("5 developmental stages");
        h3Label[2]
.getStyle().set("color", "#FFFFFF");
        inners[2]
.add(new HorizontalLayout(h3Label[2]
));

        Icon icon = new Icon(VaadinIcon.ABACUS);
        icon.setSize("70px");
        inners[0]
.add(icon);
        icon = new Icon(VaadinIcon.AUTOMATION); icon.setSize("70px");
        inners[1]
.add(icon);
        icon = new Icon(VaadinIcon.CHART); icon.setSize("70px");
        inners[2]
.add(icon);
        inners[0]
.getStyle().set("background-color", "#605ca8");
        inners[1]
.getStyle().set("background-color", "#00a65a");
        inners[2]
.getStyle().set("background-color", "#f39c12");
        inners[0]
.getStyle().set("color", "#FFFFFF");
        inners[1]
.getStyle().set("color", "#FFFFFF");
        inners[2]
.getStyle().set("color", "#FFFFFF");

        String text = "Neuronal Growth Cone Multi-Omics Insight (GC-Insights)\n" +
                "\n" +
                "A web-based tool to navigate proteomics and lipidomics data\n" +
                "\n" +
                "GC-Insights offers tools that enable the analysis and output of high resolution mass spectrometric data of growth cone proteins and lipids generated after extensive fractionation. Please click for tutorial and overview here. \n" +
                "\n" +
                "Study workflow is detailed below\n";

        layout.setWidthFull();
        layout.setHeight("100px");
        setPadding(true);
        add(layout);
        add(new H3("Neuronal Growth Cone Multi-Omics Insight (GC-Insights)"));
        add(new Paragraph("A web-based tool to navigate proteomics and lipidomics data"));
        add(new Paragraph("GC-Insights offers tools that enable the analysis and output of high resolution mass spectrometric data of growth cone proteins and lipids generated after extensive fractionation. Please click for tutorial and overview below."));

        Image image = new Image();
        image.setSrc("images//home_page.png");
        image.setWidthFull();

        // Tutorial
        tutorialDialog.add(new VideoEmbed());
        tutorialDialog.setWidth("1100px");
        tutorialDialog.setHeight("700px");
        HorizontalLayout buttonHolder = new HorizontalLayout(playButton());
        buttonHolder.setWidthFull();
        buttonHolder.setHeight("380px");
        buttonHolder.setJustifyContentMode(JustifyContentMode.CENTER);
        add(buttonHolder);

        add("Study workflow is detailed below");
        setSizeFull();
        add(image);

    }

    private Button playButton() {
        Image thumbnail = new Image("images//video//play.png", "Play tutorial");
        thumbnail.setWidth("380px");
        thumbnail.setHeight("210px");
        Button play = new Button(thumbnail);
        play.addClickListener(e -> tutorialDialog.open());
        play.setWidth("380px");
        play.setHeight("240px");
        play.getStyle().set("cursor", "pointer");
        return play;
    }

}

Has anyone run into similar issue, is this a browser issue or Vaadin issue? Seems like Safari is forcing the page to collapse without scrolling whereas Chrome allows the page to scroll. Any help would be greatly appreciated!!

Maik21 · August 1, 2019, 7:29am

Hi Rabeet,

I’ve run into a problem very similar to yours.
My View looks good at chrome browser, but on safari it is not streched up.
In my View, I have a toplayout (header), a contentLayout (middle) and a bottomlayout (footer). The middle-layout should flexible grow until the whole page reaches the 100% maximum. In Chrome this just works fine. But in Safari it does not!
At this point, I found out, that the “flow-growth” css-style, which will be set if you use the “expand(component)” - method, does not work correctly on safari.

Maybe you could check your views with developer-tools and compare their behaviour. I think there is a css-option which behaves in a different way on safari, then on chrome or firefox.

Hope this will help you a step forward.

Joacim · August 2, 2019, 1:02pm

Hi Rabeet,

VerticalLayout and HorizontalLayout are flexbox layouts. When you set a VerticalLayout’s height to 100% its flex items will shrink to try and fit the given space. As you noted Chrome and Safari handle flexbox a bit differently.

You can try one of the following solutions:

Don’t set the VerticalLayout’s height to 100%.
Set flex-shrink: 0; on the two topmost HorizontalLayouts.

layout.getStyle().set("flex-shrink", "0");
buttonHolder.getStyle().set("flex-shrink", "0");

Hope that helps.

Stuart · August 2, 2019, 2:30pm

Hi Rabeet,

I had similar issues with my app on various browsers. I ended up swapping out all the verticalLayouts for Divs and setting them to display: flex and adding css to the children to set how they behave. (flex-grow mainly).

Pretty much what Joacim is saying really

S.

Rabeet · November 7, 2019, 4:12am

Joacim Päivärinne:
Hi Rabeet,

VerticalLayout and HorizontalLayout are flexbox layouts. When you set a VerticalLayout’s height to 100% its flex items will shrink to try and fit the given space. As you noted Chrome and Safari handle flexbox a bit differently.

You can try one of the following solutions:

Don’t set the VerticalLayout’s height to 100%.

Set flex-shrink: 0; on the two topmost HorizontalLayouts.
layout.getStyle().set("flex-shrink", "0");
buttonHolder.getStyle().set("flex-shrink", "0");
Hope that helps.

Thanks a lot this fixed the issue!