Firefox: attach + scroll-lock -> modal not scrolling into view

[Eusebius1920]

Version

vue-final-modal: v3.4.4 vue: 3.2.37

OS

All OS, Firefox in Version 102 (among other versions)

Reproduction Link

https://codesandbox.io/s/gifted-merkle-z1j9c0?file=/src/App.vue

works on chrome, not on firefox

Steps to reproduce

click on the button "open model" at the bottom of the page

What is Expected?

modal opens and its content is visible

What is actually happening?

modal opens and content is not visible / scrolled into view and there is no possibility to scroll for the user (because scroll lock is enabled by default)

Solution

After line 397 in VueFinalModal.vue add something like

if (props.focusRetain || props.focusTrap) {
  vfmContainer.value.focus()        
  if(vfmContainer?.value?.scrollIntoView) vfmContainer.value.scrollIntoView()
}

[Eusebius1920]

I guess line 331 has to be adjusted accordingly

I can prepare a pull request if confirmed and desired

[hunterliu1003]

@Eusebius1920

I think it's the style issue. I set the vfm position from absolute to fixed solved the issue https://codesandbox.io/s/ecstatic-voice-pbolot?file=/src/App.vue:949-987

.vfm {
  position: fixed !important;
}