diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index d1967a22f83..5ef045f7495 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -33,7 +33,6 @@
   outline: none;
 
   cursor: pointer;
-  touch-action: none;
   user-select: none;
   z-index: $z-index-item-input;
 }
@@ -50,6 +49,8 @@
 
 :host(.legacy-toggle) {
   contain: content;
+
+  touch-action: none;
 }
 
 :host(.ion-focused) input {
@@ -240,8 +241,6 @@ input {
 
   background: var(--track-background);
 
-  pointer-events: none;
-
   overflow: inherit;
 }
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index bdb277fe8ff..bf8779fa691 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -40,6 +40,8 @@ export class Toggle implements ComponentInterface {
   private lastDrag = 0;
   private legacyFormController!: LegacyFormController;
   private inheritedAttributes: Attributes = {};
+  private toggleTrack?: HTMLElement;
+  private didLoad = false;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -157,23 +159,42 @@ export class Toggle implements ComponentInterface {
   }
 
   async connectedCallback() {
-    const { el } = this;
-
-    this.legacyFormController = createLegacyFormController(el);
-
-    this.gesture = (await import('../../utils/gesture')).createGesture({
-      el,
-      gestureName: 'toggle',
-      gesturePriority: 100,
-      threshold: 5,
-      passive: false,
-      onStart: () => this.onStart(),
-      onMove: (ev) => this.onMove(ev),
-      onEnd: (ev) => this.onEnd(ev),
-    });
-    this.disabledChanged();
+    this.legacyFormController = createLegacyFormController(this.el);
+
+    /**
+     * If we have not yet rendered
+     * ion-toggle, then toggleTrack is not defined.
+     * But if we are moving ion-toggle via appendChild,
+     * then toggleTrack will be defined.
+     */
+    if (this.didLoad) {
+      this.setupGesture();
+    }
+  }
+
+  componentDidLoad() {
+    this.setupGesture();
+    this.didLoad = true;
   }
 
+  private setupGesture = async () => {
+    const { toggleTrack } = this;
+
+    if (toggleTrack) {
+      this.gesture = (await import('../../utils/gesture')).createGesture({
+        el: toggleTrack,
+        gestureName: 'toggle',
+        gesturePriority: 100,
+        threshold: 5,
+        passive: false,
+        onStart: () => this.onStart(),
+        onMove: (ev) => this.onMove(ev),
+        onEnd: (ev) => this.onEnd(ev),
+      });
+      this.disabledChanged();
+    }
+  };
+
   disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
@@ -273,7 +294,7 @@ export class Toggle implements ComponentInterface {
 
     const { enableOnOffLabels, checked } = this;
     return (
-      <div class="toggle-icon" part="track">
+      <div class="toggle-icon" part="track" ref={(el) => (this.toggleTrack = el)}>
         {/* The iOS on/off labels are rendered outside of .toggle-icon-wrapper,
          since the wrapper is translated when the handle is interacted with and
          this would move the on/off labels outside of the view box */}