Fix toast weirdness on iOS scrolling (#461)

* Fix toast weirdness on iOS scrolling * Remove unnecessary css hacks
stackernews · Aug 31, 2023 · c6dfd1e · c6dfd1e
1 parent 9065713
commit c6dfd1e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/components/toast.js b/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}

diff --git a/components/toast.module.css b/components/toast.module.css
@@ -1,11 +1,15 @@
+.toastContainer {
+  transform: translate3d(0,0,0);
+}
+
 .toast {
   width: auto;
   border: 1px solid var(--bs-success-border-subtle);
   color: #fff;
 }
 
 .toastClose {
-color: #fff;
+  color: #fff;
   font-family: "lightning";
   font-size: 150%;
   line-height: 1rem;