Fix preview flickering effect

isaul32 · Oct 9, 2019 · 70fefa8 · 70fefa8
1 parent 69a0264
commit 70fefa8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/mathui.js b/src/mathui.js
@@ -43,6 +43,12 @@ export default class MathUI extends Plugin {
 		super.destroy();
 
 		this._form.destroy();
+
+		// Destroy preview element
+		let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line
+		if ( prewviewEl ) {
+			prewviewEl.parentNode.removeChild( prewviewEl );
+		}
 	}
 
 	_showUI() {
@@ -151,7 +157,7 @@ export default class MathUI extends Plugin {
 			// Hide preview element
 			let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line
 			if ( prewviewEl ) {
-				prewviewEl.style.display = 'none';
+				prewviewEl.style.visibility = 'hidden';
 			}
 
 			this.editor.editing.view.focus();

diff --git a/src/utils.js b/src/utils.js
@@ -48,8 +48,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 			selectRenderMode( element, preview, previewUid, el => {
 				renderMathJax3( equation, el, display, () => {
 					if ( preview ) {
-						el.style.display = 'block';
 						moveAndScaleElement( element, el );
+						el.style.visibility = 'visible';
 					}
 				} );
 			} );
@@ -64,8 +64,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 					if ( preview ) {
 						// eslint-disable-next-line
 						MathJax.Hub.Queue( () => {
-							el.style.display = 'block';
 							moveAndScaleElement( element, el );
+							el.style.visibility = 'visible';
 						} );
 					}
 				} );
@@ -78,8 +78,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 				displayMode: display
 			} );
 			if ( preview ) {
-				el.style.display = 'block';
 				moveAndScaleElement( element, el );
+				el.style.visibility = 'visible';
 			}
 		} );
 	} else if ( typeof engine === 'function' ) {
@@ -140,6 +140,7 @@ function getPreviewElement( element, previewUid ) {
 	if ( !prewviewEl ) {
 		prewviewEl = document.createElement( 'div' ); // eslint-disable-line
 		prewviewEl.setAttribute( 'id', previewUid );
+		prewviewEl.style.visibility = 'hidden';
 		document.body.appendChild( prewviewEl ); // eslint-disable-line
 
 		let ticking = false;