From 7ef6ff96b00e1ff20036f770dd5b5e6f788bde74 Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Fri, 25 Mar 2022 18:41:18 +0200
Subject: [PATCH] fix: add vendor prefix to CSS properties that are updated
 through JavaScript

---
 .../components/table/gantt-table.component.ts |  7 +++++-
 .../src/utils/set-style-with-vendor-prefix.ts | 23 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/gantt/src/utils/set-style-with-vendor-prefix.ts

diff --git a/packages/gantt/src/components/table/gantt-table.component.ts b/packages/gantt/src/components/table/gantt-table.component.ts
index 886550f1..a9dcf6db 100644
--- a/packages/gantt/src/components/table/gantt-table.component.ts
+++ b/packages/gantt/src/components/table/gantt-table.component.ts
@@ -19,6 +19,7 @@ import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../gantt-abstract';
 import { GanttUpper, GANTT_UPPER_TOKEN } from '../../gantt-upper';
+import { setStyleWithVendorPrefix } from '../../utils/set-style-with-vendor-prefix';
 
 export const defaultColumnWidth = 100;
 export const minColumnWidth = 80;
@@ -84,7 +85,11 @@ export class GanttTableComponent implements OnChanges {
 
     private dragFixed(config: DragFixedConfig) {
         if (config.movedWidth < config.minWidth) {
-            config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;
+            setStyleWithVendorPrefix({
+                element: config.target,
+                style: 'transform',
+                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
+            });
         }
     }
 
diff --git a/packages/gantt/src/utils/set-style-with-vendor-prefix.ts b/packages/gantt/src/utils/set-style-with-vendor-prefix.ts
new file mode 100644
index 00000000..ff96819f
--- /dev/null
+++ b/packages/gantt/src/utils/set-style-with-vendor-prefix.ts
@@ -0,0 +1,23 @@
+interface SetStyleWithVendorPrefixOptions {
+    element: HTMLElement;
+    // The name of the CSS property, e.g. `transform`.
+    style: string;
+    value: string;
+}
+
+const supports = (typeof window !== 'undefined' && !!window.CSS && CSS.supports) || (() => false);
+
+/**
+ * Note: we don't need to add vendor prefixes within `.scss` files since they're added automatically.
+ * This function is necessary when the `element.style` is updated directly through the JavaScript.
+ * This is not required to be used with CSS properties that don't require vendor prefixes (e.g. `opacity`).
+ */
+export function setStyleWithVendorPrefix({ element, style, value }: SetStyleWithVendorPrefixOptions): void {
+    element.style[style] = value;
+
+    if (supports(`-webkit-${style}: ${value}`)) {
+        // Note: some browsers still require setting `-webkit` vendor prefix. E.g. Mozilla 49 has implemented
+        // the 3D support for `transform`, but it requires setting `-webkit-` prefix.
+        element.style[`-webkit-${style}`] = value;
+    }
+}