fix: add vendor prefix to CSS properties that are updated through Jav…

…aScript

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)`
+            });
         }
     }
 

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;
+    }
+}