fix IE/Edge SVG animation bug (chanind#165)

wishForget · Mar 5, 2020 · 2f136f9 · 2f136f9
1 parent be6bb60
commit 2f136f9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/demo/test.js b/demo/test.js
@@ -15,10 +15,10 @@ function updateCharacter() {
 	writer = HanziWriter.create('target', character, {
 		width: 400,
 		height: 400,
-		renderer: 'canvas',
 		radicalColor: '#166E16',
 		onCorrectStroke: printStrokePoints,
 		onMistake: printStrokePoints,
+		showCharacter: false,
 	});
 	isCharVisible = true;
 	isOutlineVisible = true;

diff --git a/src/renderers/svg/CharacterRenderer.js b/src/renderers/svg/CharacterRenderer.js
@@ -1,3 +1,4 @@
+const { isMsBrowser } = require('../../utils');
 const StrokeRenderer = require('./StrokeRenderer');
 
 
@@ -18,10 +19,15 @@ CharacterRenderer.prototype.render = function(props) {
   if (props === this._oldProps) return;
   if (props.opacity !== this._oldProps.opacity) {
     this._group.style.opacity = props.opacity;
-    if (props.opacity === 0) {
-      this._group.style.display = 'none';
-    } else if (this._oldProps.opacity === 0) {
-      this._group.style.display = 'initial';
+    // MS browsers seem to have a bug where if SVG is set to display:none, it sometimes breaks.
+    // More info: https://github.com/chanind/hanzi-writer/issues/164
+    // this is just a perf improvement, so disable for MS browsers
+    if (!isMsBrowser) {
+      if (props.opacity === 0) {
+        this._group.style.display = 'none';
+      } else if (this._oldProps.opacity === 0) {
+        this._group.style.removeProperty('display');
+      }
     }
   }
   const colorsChanged = (

diff --git a/src/renderers/svg/__tests__/CharacterRenderer-test.js b/src/renderers/svg/__tests__/CharacterRenderer-test.js
@@ -123,7 +123,7 @@ describe('CharacterRenderer', () => {
     charRenderer.render(props2);
 
     expect(subCanvas.style.opacity).toBe('0.9');
-    expect(subCanvas.style.display).toBe('initial');
+    expect(subCanvas.style.display).toBe('');
   });
 
 });
diff --git a/src/utils.js b/src/utils.js
@@ -120,6 +120,9 @@ const objRepeat = (item, times) => {
   return obj;
 };
 
+const ua = (global.navigator && global.navigator.userAgent) || '';
+const isMsBrowser = ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0 || ua.indexOf('Edge/') > 0;
+
 module.exports = {
   _assign,
   arrLast,
@@ -137,4 +140,5 @@ module.exports = {
   requestAnimationFrame,
   timeout,
   trim,
+  isMsBrowser,
 };