From a5148b9e2ac358910dd72f9a71a82a3af93f072a Mon Sep 17 00:00:00 2001 From: Mihai George Date: Thu, 14 Sep 2017 21:33:48 +0300 Subject: [PATCH 1/2] Fixed blur effect caused by webkit translate --- src/modalFactory.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/modalFactory.js b/src/modalFactory.js index 95e3134..40d60a5 100644 --- a/src/modalFactory.js +++ b/src/modalFactory.js @@ -58,6 +58,24 @@ module.exports = function(animation){ } }, + normalizeTransformMatrix: function(){ + var mx = window.getComputedStyle(this.refs.modal, null); + mx = mx.getPropertyValue("-webkit-transform") || + mx.getPropertyValue("-moz-transform") || + mx.getPropertyValue("-ms-transform") || + mx.getPropertyValue("-o-transform") || + mx.getPropertyValue("transform") || false; + + var values = mx.replace(/ |\(|\)|matrix/g, "").split(","); + for (var v in values) { + values[v] = v > 4 ? Math.ceil(values[v]) : values[v]; + } + + if (this.refs.modal) { + this.refs.modal.style.transform = "matrix(" + values.join() + ")"; + } + }, + handleBackdropClick: function() { if (this.props.closeOnClick) { this.hide("backdrop"); @@ -141,6 +159,7 @@ module.exports = function(animation){ var ref = this.props.animation.getRef(); var node = this.refs[ref]; this.addTransitionListener(node, this.enter); + this.addTransitionListener(node, this.normalizeTransformMatrix); }.bind(this), 0); }, From 59d2d9f5d7363f22aed60db61aafa111d9abc5b9 Mon Sep 17 00:00:00 2001 From: Mihai George Date: Thu, 14 Sep 2017 21:58:24 +0300 Subject: [PATCH 2/2] Improved normalize method code --- src/modalFactory.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/modalFactory.js b/src/modalFactory.js index 40d60a5..d56a360 100644 --- a/src/modalFactory.js +++ b/src/modalFactory.js @@ -59,20 +59,22 @@ module.exports = function(animation){ }, normalizeTransformMatrix: function(){ - var mx = window.getComputedStyle(this.refs.modal, null); - mx = mx.getPropertyValue("-webkit-transform") || - mx.getPropertyValue("-moz-transform") || - mx.getPropertyValue("-ms-transform") || - mx.getPropertyValue("-o-transform") || - mx.getPropertyValue("transform") || false; - - var values = mx.replace(/ |\(|\)|matrix/g, "").split(","); - for (var v in values) { - values[v] = v > 4 ? Math.ceil(values[v]) : values[v]; - } - if (this.refs.modal) { - this.refs.modal.style.transform = "matrix(" + values.join() + ")"; + var mx = window.getComputedStyle(this.refs.modal, null); + mx = mx.getPropertyValue("-webkit-transform") || + mx.getPropertyValue("-moz-transform") || + mx.getPropertyValue("-ms-transform") || + mx.getPropertyValue("-o-transform") || + mx.getPropertyValue("transform") || false; + + if (mx) { + var values = mx.replace(/ |\(|\)|matrix/g, "").split(","); + for (var v in values) { + values[v] = v > 4 ? Math.ceil(values[v]) : values[v]; + } + + this.refs.modal.style.transform = "matrix(" + values.join() + ")"; + } } },