search

milieuinfo / webcomponent-vl-ui-wizard

1 stars 0 forks source link

[BUG] - Modal in wizard pane opent niet correct in Firefox en Safari #34

Closed driesva closed 4 years ago

driesva commented 4 years ago

Omschrijf het probleem In een applicatie waarbij we met LitElement components werken en een modal gebruiken, verschijnt de modal niet correct in Firefox en Safari.

In Chrome werkt dit wel.

Hoe te reproduceren Ik heb de polymer demo app aangepast waarbij het probleem zichtbaar is. LitWizardDialog.zip

De 2de modal open ook niet in het tweede pane, maar in het eerste.

Gewenst gedrag Modal die correct opent.

Screenshots image

image

Omgeving (gelieve aan te vullen):

Extra info Niet duidelijk of het een probleem is met modal, hoe wij die gebruiken, de combinatie met de wizard of LitElement.

coemans commented 4 years ago

Het overflow probleem kan eenvoudig opgelost worden, maar in Firefox en Safari wordt er een polyfill gebruikt voor de dialog die nog niet 100% native ondersteund wordt door deze browsers. Hierdoor is het positioneren van de polyfill backdrop in combinatie met verschillende stacked context elementen van de wizard zeer complex. Is het een optie om de modal elementen ter hoogte van de wizard te plaatsen?

Limitations In the polyfill, modal dialogs have limitations

  • They should not be contained by parents that create a stacking context, see below
  • The browser's chrome may not always be accessible via the tab key
  • Changes to the CSS top/bottom values while open aren't retained

Stacking Context The major limitation of the polyfill is that dialogs should not have parents that create a stacking context. The easiest way to solve this is to move your

element to be a child of .

driesva commented 4 years ago

@coemans bedoel je het vl-modal element uit de vl-wizard-pane halen en ergens naast vl-wizard plaatsen?

In dat geval komt dit min of meer neer op de huidige workaround die we al hebben: die modal wordt elders al gebruikt en via een queryselector startend van root hergebruiken we die. Deze verschijnt correct.

coemans commented 4 years ago

@coemans bedoel je het vl-modal element uit de vl-wizard-pane halen en ergens naast vl-wizard plaatsen?

Inderdaad, ter hoogte van of eventueel hoger indien deze nog in een andere context gebruikt wordt. Aangezien workaround mogelijk is, lijkt dit me de beste oplossing te zijn gezien de werking van de polyfill.