🐛 Fixes problems with blending modes

CHANGES.md

@@ -28,6 +28,7 @@
 - Fix problem with pan and space [#811](https://github.com/penpot/penpot/issues/811)
 - Fix issue when parsing exponential numbers in paths
 - Remove legacy system user and team [#843](https://github.com/penpot/penpot/issues/843)
+- Fix problems with blending modes [#837](https://github.com/penpot/penpot/issues/837)
 - Fix problem with zoom an selection rect [#845](https://github.com/penpot/penpot/issues/845)
 - Fix problem displaying team statistics [#859](https://github.com/penpot/penpot/issues/859)
 - Fix problems with text editor selection [Taiga #1546](https://tree.taiga.io/project/penpot/issue/1546)

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -121,10 +121,7 @@
 (defn add-layer-props [attrs shape]
   (cond-> attrs
     (:opacity shape)
-    (obj/set! "opacity" (:opacity shape))
-
-    (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
-    (obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
+    (obj/set! "opacity" (:opacity shape))))
 
 (defn extract-svg-attrs
   [render-id svg-defs svg-attrs]

frontend/src/app/main/ui/shapes/shape.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.shape
   (:require
+   [app.common.data :as d]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.filters :as filters]
@@ -23,7 +24,10 @@
         render-id      (mf/use-memo #(str (uuid/next)))
         filter-id      (str "filter_" render-id)
         styles         (-> (obj/new)
-                           (obj/set! "pointerEvents" pointer-events))
+                           (obj/set! "pointerEvents" pointer-events)
+
+                           (cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
+                             (obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
 
         {:keys [x y width height type]} shape
         frame? (= :frame type)