Fix: ToastContainer hidden on iOS keyboard (#906)

[SayakDe98]

Issue:

On iOS Safari (mobile), opening the virtual keyboard causes toasts positioned at the top to either be hidden or shift incorrectly.

Previous fixes caused inconsistent behavior: sometimes the toast would disappear, or appear in the center of the screen, especially on repeated keyboard opens and closes.

The problem is due to window.visualViewport resizing when the keyboard opens, which changes the available height for the page.

Solution:

Detect iOS — the isIOSMobile() function checks the user agent for iPhone/iPad/iPod, including iPadOS 13+ which reports itself as a Mac.

Track the visual viewport shift — the useEffect listens to window.visualViewport for resize and scroll events. On every change, it reads vv.offsetTop and vv.offsetLeft, which represent how far the visible screen has shifted away from the top-left of the layout viewport. These values increase when the keyboard appears or the user scrolls down.

Apply only to top positions — inside getToastToRender, when isTop is true and we have a viewport offset, a CSS translate(offsetLeft, offsetTop) is applied to the container. This shifts the toast down/across by exactly the amount the visual viewport has moved, effectively re-pinning it to the visible screen corner. Center-positioned toasts also preserve their existing translateX(-50%) by prepending it before the new translate.

Testing Steps:

Open the playground in an iOS Safari browser or iPhone simulator.

Click a button to show a toast.

Tap an input field → keyboard opens → toast should move down so it is fully visible.

Close the keyboard → toast should return to its top position.

Scroll the page → toast remains correctly positioned relative to the viewport.

Optional: Test with long toast duration (autoClose={30000}) to ensure it persists while keyboard opens/closes.

CodeSandbox: https://codesandbox.io/p/github/SayakDe98/react-toastify/fix-ios-safari-toast-position

Related Issue:

Closes #906

Notes:

Only applies to iOS mobile Safari; other devices/platforms behave normally.

Updated playground included to simplify testing and verification.