Fix Safari bugs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sweetalert",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A beautiful replacement for JavaScript's \"alert\"",
   "main": "dist/sweetalert.min.js",
   "scripts": {

src/css/text.css

@@ -27,12 +27,14 @@
   line-height: normal;
   vertical-align: top;
   text-align: left;
-  padding: 0;
   display: inline-block;
   margin: 0;
-  padding: 0 28px;
+  padding: 0 10px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.64);
+  max-width: calc(100% - 20px);
+  overflow-wrap: break-word;
+  box-sizing: border-box;
   &:first-child {
     margin-top: 45px;
   }

src/modules/init/modal.ts

@@ -10,9 +10,9 @@ import { initTitle, initText } from './text';
 import initButtons from './buttons';
 import initContent from './content';
 
-export const injectElIntoModal = (markup: string): Element => {
+export const injectElIntoModal = (markup: string): HTMLElement => {
   const modal: Element = getNode(MODAL);
-  const el: Element = stringToNode(markup);
+  const el: HTMLElement = stringToNode(markup);
 
   modal.appendChild(el);
 

src/modules/init/text.ts

@@ -5,17 +5,34 @@ import {
 
 import { injectElIntoModal } from './modal';
 
+/*
+ * Fixes a weird bug that doesn't wrap long text in modal
+ * This is visible in the Safari browser for example.
+ * https://stackoverflow.com/a/3485654/2679245
+ */
+const webkitRerender = (el: HTMLElement) => {
+  if (navigator.userAgent.includes('AppleWebKit')){
+    el.style.display = 'none';
+    el.offsetHeight;
+    el.style.display = '';
+  }
+}
+
 export const initTitle = (title: string): void => {
   if (title) {
-    const titleEl: Node = injectElIntoModal(titleMarkup);
+    const titleEl: HTMLElement = injectElIntoModal(titleMarkup);
     titleEl.textContent = title;
+
+    webkitRerender(titleEl);
   }
 };
 
 export const initText = (text: string): void => {
   if (text) {
-    const textEl: Node = injectElIntoModal(textMarkup);
+    const textEl: HTMLElement = injectElIntoModal(textMarkup);
     textEl.textContent = text;
+
+    webkitRerender(textEl);
   }
 };
 

src/modules/utils.ts

@@ -7,11 +7,11 @@ export const getNode = (className: string): HTMLElement => {
   return <HTMLElement>document.querySelector(selector);
 };
 
-export const stringToNode = (html: string): Element => {
-  let wrapper: Element = document.createElement('div');
+export const stringToNode = (html: string): HTMLElement => {
+  let wrapper: HTMLElement = document.createElement('div');
   wrapper.innerHTML = html.trim();
 
-  return <Element>wrapper.firstChild;
+  return <HTMLElement>wrapper.firstChild;
 };
 
 export const insertAfter = (newNode: Node, referenceNode: Node) => {

src/sweetalert.css

@@ -37,8 +37,9 @@
     & .swal-modal {
       opacity: 1;
       pointer-events: auto;
-      transform: scale(1);
+      box-sizing: border-box;
       animation: showSweetAlert 0.3s;
+      will-change: transform;
     }
   }
 }
@@ -56,7 +57,7 @@
   display: inline-block;
   vertical-align: middle;
 
-  transform: scale(0.5);
+  transform: scale(1);
   transform-origin: 50% 50%;
   z-index: 10001;
   transition: transform 0.3s, opacity 0.2s;
@@ -68,7 +69,10 @@
 
 @keyframes showSweetAlert {
   0% {
-    transform: scale(0.7);
+    transform: scale(1);
+  }
+  1% {
+    transform: scale(0.5);
   }
 
   45% {