vaadin/web-components

Vaadin has a high quality component set for building mobile and desktop web applications in modern browsers

Walter Laurito

@lauritowal

what was the problem with it in the past with Safari 9?

Maybe it's related?

Kari Söderholm

@Haprog

It was overlay height not being set. This is the fix for it https://github.com/vaadin/vaadin-date-picker/pull/672/files only small CSS changes. Doesn't seem related.

Kari Söderholm

@Haprog

I think I found the problem. It's a weird CSS animation bug in Safari 12. We had a similar issue in another component. This one vaadin/vaadin-form-layout#110

I think the problem is probably that the date picker overlay scrollable areas have this style which is animating opacity (or something related):

.buffer {
        animation: fadein 0.2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

At least I was able to make it appear (when it was broken) by adding a workaround style of transform: translateX(0) !important to the <vaadin-infinite-scroller> element inside the date picker overlay.

Walter Laurito

@lauritowal

nice! I'll try it out. How can I set the style for scroller in our project? In a theme?

Kari Söderholm

@Haprog

Yea, can you try if adding this to the page works to fix it (needs to be loaded before the date picker element itself):

<dom-module id="vaadin-date-picker-overlay-content-safari-fix-styles" theme-for="vaadin-date-picker-overlay-content">
  <template>
    <style>
      vaadin-infinite-scroller {
        transform: translateX(0) !important;
      }
    </style>
  </template>
</dom-module>

Walter Laurito

@lauritowal

I'll try it out later on the simulator. Are you going to create a new version with the fix for the element also?

Thanks for your help and time!

Kari Söderholm

@Haprog

First I'll check if I can reproduce it in our demos, then need to create and issue in GitHub and then we can fix it.

Thanks for being able to help with reproducing!

I can't reproduce it in the demos at https://cdn.vaadin.com/vaadin-date-picker/4.0.3/demo/#date-picker-basic-demos Maybe it's more likely to appear only on more complex or heavier pages.

Kari Söderholm

@Haprog

Would be good if we can make some simple way to reproduce it so we can easily validate the fix too (without relying on the issue only happening on some third party site).

Walter Laurito

@lauritowal

I need to wait for an upgrade right now, before I can try it out again. I'll let you know if I can reproduce it later.

Kari Söderholm

@Haprog

Thanks. Please let me know if the workaround above fixes it for you.

Or if you can apply the workaround on the site, I can test in Simulator again.

But there might be some other issue too since you had the screenshot of it being broken on Chrome too.

Was that screenshot from your user/customer or from you? Do you know which version of Chrome is that?

It would be good to be able to reproduce it on Chrome too (if it really is an issue there, and not just an old Chrome version)

sdyalor

@sdyalor

@sdyalor
Hi everiyone
What is the alternative to componentDidMount() on Lit-Element?

YuanYuan Liu

@mgenware

@sdyalor i believe it's firstUpdated

Walter Laurito

@lauritowal

@Haprog. Hi Kari. Thanks for your help again. Unfortunately, the workaround did not fix our problem. We still notice the problem on the Iphone.

sdyalor

@sdyalor

Mgen

thankyou

Kari Söderholm

@Haprog

@lauritowal Hmm ok, then it might be some other issue. It might be some race condition depending on in which order some dependencies on the page load or something else on the page affecting the initial render of the date picker overlay. If you can somehow isolate the issue to make a small application that reproduces the problem (if it is a problem with the component itself) it would help us to make a fix.

Tomi Virkki

@tomivirkki

@lauritowal Looks like the issue reproduces locally also but only on material theme.

Tomi Virkki

@tomivirkki

We'll take a closer look at why the date picker overlay doesn't work in this particular case (Material theme on iOS 12 Safari). For now you can include the following snippet somewhere in your app (index.html for example) to workaround the issue.

<dom-module id="material-date-picker-overlay-animation" theme-for="vaadin-date-picker-overlay">
  <template>
    <style>
      @keyframes material-overlay-animation {
        100% {
          opacity: 1;
        }
      }

      :host([opening]),
      :host([closing]) {
        animation: 0.1s material-overlay-animation;
      }
    </style>
  </template>
</dom-module>

Tomi Virkki

@tomivirkki

Filed the issue in vaadin/vaadin-date-picker#676

Walter Laurito

@lauritowal

Hi guys @tomivirkki @Haprog Thanks for your help! I will try the workaround and let you know.

sdyalor

@sdyalor

Hey

I need serious help ;c

I got a table in server without relations, to display data there is a query with to much unions

fetch each table is more efficient

but i got a trouble rendering data with VaadinGrid

how can i reender Columns as table description

all data is in redux

here is the implementation

https://pwa.sdyalor.me/view4

Can someone help me with this ;c, I was thinking, creating a ViewArray maping all tables but dont know ;c

Pekka Maanpää

@pekam

Hi, @sdyalor! I'm not sure that I understand your issue. You want some kind of custom rendering of data? In that case, take a look at three demos here: https://vaadin.com/components/vaadin-grid/html-examples/grid-basic-demos
It looks like you have used the path property on columns to display the data. I suggest you to take a look at the second demo on the page I linked, which shows how to implement a renderer function for a column.

Mark Garrett

@moderndeveloperllc

Quick question: Anyway to have the label on <vaadin-checkbox-group> to be to the left instead of above the checkboxes?

sdyalor

@sdyalor

Ahm, my issue is how to get component render quick

i have performance issues ;c

Giovanni Lovato

@heruan

Guys I’m losing my mind: where this _setInputs is being defined?!

Giovanni Lovato

@heruan

Okay, seems like it’s a dynamic call handled by Polymer’s PropertyEffects :relieved:

Rajul Vishwakarma

@rajul3199

Failed to execute goal org.eclipse.jetty:jetty-maven-plugin:9.4.15.v20190215:run (default-cli) on project exercises-intro: Failure

i am having this problem when i was installing vaadin

Where communities thrive

People

Repo info

Activity