Transform CPU

src-web/components/core/Editor/Editor.tsx

@@ -429,7 +429,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   const decoratedActions = useMemo(() => {
     const results = [];
     const actionClassName = classNames(
-      'bg-surface transition-opacity transform-gpu opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow',
+      'bg-surface transition-opacity transform-cpu opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow',
     );
 
     if (format) {

src-web/components/core/SegmentedControl.tsx

@@ -22,7 +22,7 @@ export function SegmentedControl<T extends string>({ value, onChange, options, n
       role="group"
       dir="ltr"
       space={0.5}
-      className="bg-surface-highlight rounded-md mb-auto opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu"
+      className="bg-surface-highlight rounded-md mb-auto opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-cpu"
       onKeyDown={(e) => {
         const selectedIndex = options.findIndex((o) => o.value === selectedValue);
         if (e.key === 'ArrowRight') {

src-web/components/core/Tabs/Tabs.tsx

@@ -67,7 +67,7 @@ export function Tabs({
       ref={ref}
       className={classNames(
         className,
-        'transform-gpu',
+        'transform-cpu',
         'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
       )}
     >