Screen Glitch When Close Modal

[ardyanrizki]

Bug report

Describe the bug

When closing the modal an unexpected page glitch/blinking screen occurs. The modal still could close completely after that.

To Reproduce

Take action to close the modal either by clicking modal's close button, ESC, or custom button inside modal that calls the close function.

Expected behavior

Modal closes smoothly without any odd blinks.

Screenshots

https://user-images.githubusercontent.com/70071272/167860371-0cde704d-3f27-40d4-bd14-d4d1be77c3c4.mov

System information

• Version of react-responsive-modal: ^6.2.0
• Version of react: 18.1.0
• Version of next: 12.1.6
• Version of react-dom": 18.1.0
• Browser version: Chrome 101.0.4951.54 (Official Build) (arm64), Safari 15.4 (17613.1.17.1.13)

Additional context

This case happens on my web page here. You can clicking the kebab menu (three dots icon) at the top right page to show the modal and then click "Cancel" to close it.

[omkhetwal]

Temporary fix ( mount|unmount ) modal

{
       open && <Modal />
}

import "./styles.css";

import "react-responsive-modal/styles.css";
import { Modal } from "react-responsive-modal";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={onOpenModal}>Open</button>
      {open && (
        <Modal open={open} onClose={onCloseModal} center>
          <h2>Simple centered modal</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
            hendrerit risus, sed porttitor quam.
          </p>
        </Modal>
      )}
    </div>
  );
}

[ardyanrizki]

Temporary fix ( mount|unmount ) modal

{
       open && <Modal />
}

import "./styles.css";

import "react-responsive-modal/styles.css";
import { Modal } from "react-responsive-modal";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={onOpenModal}>Open</button>
      {open && (
        <Modal open={open} onClose={onCloseModal} center>
          <h2>Simple centered modal</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
            hendrerit risus, sed porttitor quam.
          </p>
        </Modal>
      )}
    </div>
  );
}

Thank you for your workaround @omkhetwal. Does this happen often in any case?

[omkhetwal]

@ardyanrizki I'm not sure, there were more than 4 instances where I had to use Modal in the application, at some place I noticed there wasn't any glitch, then I checked the difference so when I came across your issue, I did the change and worked for me too. It didn't happen in previous versions of the library though.

[huksley]

I have the same issue (with same versions), any updates on this?

[antosvle]

Same issue here

[mazzomix]

+1

[laurenskling]

I blame this on React 18. Started happening to me after upgrading to React 18

[Maciej916]

Same for me

[huksley]

Some investigations here https://github.com/radix-ui/primitives/pull/1344

[huksley]

I fixed it in a different way, maybe it is worse, but I don't want to unmount component:

const ref = useRef<HTMLDivElement>(null);
return (<Modal
    ref={ref}
    onClose={_ => setOpen(false)}
    onAnimationEnd={() => {
        if (!open) {
          if (ref.current) {
            ref.current.style.opacity = "0%";
          }
          if (ref.current?.parentElement?.parentElement) {
            ref.current.parentElement.parentElement.style.opacity = "0%";
          }
        }
      }}>
     {children}
  </Modal>);

[Maciej916]

When it will be fixed?

[ArturoDucasse]

I have the exact same issue, with the versions:

• node: v18.8.0
• react: ^18.0.0 (still waiting for #496 to be accepted btw)
• react-dom: "~18.1.0",
• react-responsive-modal: ^6.2.0

[AVPletnev]

I have the exact same issue, with the versions:

• node: v18.8.0
• react: ^18.0.0 (still waiting for Support React 18 #496 to be accepted btw)
• react-dom: "~18.1.0",
• react-responsive-modal: ^6.2.0

add css it helped me .react-responsive-modal-overlay, .react-responsive-modal-container, .react-responsive-modal-modal { animation-fill-mode: forwards!important; }

[Shooshte]

Same issue with the closing animation, adding the CSS that @AVPletnev posted solved it.

[xyeres]

Indeed @AVPletnev's CSS fixed it thanks!

[ardyanrizki]

Fixed with this one line css. Credit and big thanks to @AVPletnev https://github.com/pradel/react-responsive-modal/issues/495#issuecomment-1250045781

add css it helped me .react-responsive-modal-overlay, .react-responsive-modal-container, .react-responsive-modal-modal { animation-fill-mode: forwards!important; }

[huksley]

I think this PR needs to stay in open state because repo and NPM package is still not fixed.

[irtaza9]

Fixed with this one line css. Credit and big thanks to @AVPletnev

.react-responsive-modal-overlay,
.react-responsive-modal-container,
.react-responsive-modal-modal {
  animation-fill-mode: forwards !important;
}

[kahlan88]

This is still an issue in the latest version of the package. While the suggestion helps work around it, the issue is with the package.

[Aminehassou]

Fixed with this one line css. Credit and big thanks to @AVPletnev #495 (comment)

add css it helped me .react-responsive-modal-overlay, .react-responsive-modal-container, .react-responsive-modal-modal { animation-fill-mode: forwards!important; }

This fixes the issue but introduces a different one for me, makes my modal have different color values throughout its window:

FEFEFE

FFFFFF

My guess is this has something to do with the animation not fully completing when using animation-fill-mode: forwards. Causing a slight bit of transparency.

[BansiBrainerHub]

this one works for me as well!

.react-responsive-modal-modal { animation-fill-mode: forwards !important; }

[Mathias-21]

same issue