Fix toast weirdness on iOS scrolling (#461)

* Fix toast weirdness on iOS scrolling

* Remove unnecessary css hacks

components/toast.js

@@ -52,7 +52,7 @@ export const ToastProvider = ({ children }) => {
 
   return (
     <ToastContext.Provider value={toaster}>
-      <ToastContainer className='pb-3 pe-3' position='bottom-end' containerPosition='fixed'>
+      <ToastContainer className={`pb-3 pe-3 ${styles.toastContainer}`} position='bottom-end' containerPosition='fixed'>
         {toasts.map(toast => (
           <Toast
             key={toast.id} bg={toast.variant} show autohide={toast.autohide}

components/toast.module.css

@@ -1,3 +1,7 @@
+.toastContainer {
+  transform: translate3d(0,0,0);
+}
+
 .toast {
   width: auto;
   border: 1px solid var(--bs-success-border-subtle);