fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Can toasts display over a video playing in fullscreen? #982

Closed catalinandreipreda closed 8 months ago

catalinandreipreda commented 12 months ago

Do you want to request a feature or report a bug?

Question/feature request

What is the current behavior?

I have a video player (Shaka if it makes a difference) and I display a toast when people toggle captions. Works well with the video minimised, but if it's playing in fullscreen the notifications don't overlay on top of the video so the user doesn't notice my disclaimer.

Can you please advise if react-toastify can do this? or you know other workarounds?

What is the expected behavior?

Toast is visible over fullscreen videos

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^17.0.2", "next": "^12.1.0", "react-toastify": "^9.1.3",

Chrome macos

fkhadra commented 11 months ago

Hey @catalinandreipreda, have you tried playing with z-index ? If you can share a codesanbox with the issue or share a repo I could take a look

Ruttmann commented 11 months ago

You can also use a portal. Search for createPortal on React docs.