fix: Do not show outline when tile resizing is disabled

perf: Drag positioning uses 3d transforms for improved view
transition performance. Clamp coordinates to prevent subpixel blur.

Author: rkaraivanov

src/components/common/controllers/drag.ts

@@ -6,7 +6,7 @@ import type {
 import type { Ref } from 'lit/directives/ref.js';
 
 import { getDefaultLayer } from '../../resize-container/default-ghost.js';
-import { findElementFromEventPath, getRoot } from '../util.js';
+import { findElementFromEventPath, getRoot, roundByDPR } from '../util.js';
 
 type DragCallback = (parameters: DragCallbackParameters) => unknown;
 type DragCancelCallback = (state: DragState) => unknown;
@@ -381,7 +381,7 @@ class DragController implements ReactiveController {
   }
 
   private _assignPosition(element: HTMLElement): void {
-    element.style.transform = `translate(${this._state.position.x}px,${this._state.position.y}px)`;
+    element.style.transform = `translate3d(${roundByDPR(this._state.position.x)}px,${roundByDPR(this._state.position.y)}px,0)`;
   }
 
   private _createDragGhost(): void {

src/components/common/util.ts

@@ -341,3 +341,8 @@ export function getCenterPoint(element: Element) {
     y: top + height * 0.5,
   };
 }
+
+export function roundByDPR(value: number): number {
+  const dpr = globalThis.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}

src/components/popover/popover.ts

@@ -13,14 +13,14 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js';
 
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { getElementByIdFromRoot, isEmpty, isString } from '../common/util.js';
+import {
+  getElementByIdFromRoot,
+  isEmpty,
+  isString,
+  roundByDPR,
+} from '../common/util.js';
 import { styles } from './themes/light/popover.base.css.js';
 
-function roundByDPR(value: number) {
-  const dpr = globalThis.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-
 /**
  * Describes the preferred placement of a toggle component.
  */

src/components/tile-manager/tile.ts

@@ -499,12 +499,17 @@ export default class IgcTileComponent extends EventEmitterMixin<
       state.current
     );
 
-    const { transition } = startViewTransition(() => {
+    await startViewTransition(() => {
       this.colSpan = colSpan;
       this.rowSpan = rowSpan;
-    });
+    }).transition?.updateCallbackDone;
+
+    // const { transition } = startViewTransition(() => {
+    //   this.colSpan = colSpan;
+    //   this.rowSpan = rowSpan;
+    // });
 
-    await transition?.updateCallbackDone;
+    // await transition?.updateCallbackDone;
 
     // TODO:
     // const { width, height } = this._resizeState.calculateActualSize(
@@ -651,6 +656,9 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
     this._resizeContainer?.setSize(width, height);
 
+    const isEnabled = !this._resizeDisabled;
+    const isActive = !this._resizeDisabled && this._resizeMode === 'always';
+
     return html`
       <igc-resize
         part=${partNameMap({
@@ -661,8 +669,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
         })}
         exportparts="trigger-side, trigger, trigger-bottom"
         mode="deferred"
-        .enabled=${!this._resizeDisabled}
-        ?active=${this._resizeMode === 'always'}
+        .enabled=${isEnabled}
+        ?active=${isActive}
         .ghostFactory=${this._createResizeGhost}
         @igcResizeStart=${this._handleResizeStart}
         @igcResize=${this._handleResize}