diff --git a/lib/web_ui/lib/src/engine/semantics/text_field.dart b/lib/web_ui/lib/src/engine/semantics/text_field.dart
index 289248ea0c50f..fa3ba97e0ff7e 100644
--- a/lib/web_ui/lib/src/engine/semantics/text_field.dart
+++ b/lib/web_ui/lib/src/engine/semantics/text_field.dart
@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:async';
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
 import '../dom.dart';
+import '../embedder.dart';
 import '../platform_dispatcher.dart';
 import '../safe_browser_api.dart';
 import '../text_editing/text_editing.dart';
@@ -29,7 +31,8 @@ class SemanticsTextEditingStrategy extends DefaultTextEditingStrategy {
   /// Initializes the [SemanticsTextEditingStrategy] singleton.
   ///
   /// This method must be called prior to accessing [instance].
-  static SemanticsTextEditingStrategy ensureInitialized(HybridTextEditing owner) {
+  static SemanticsTextEditingStrategy ensureInitialized(
+      HybridTextEditing owner) {
     if (_instance != null && instance.owner == owner) {
       return instance;
     }
@@ -205,35 +208,62 @@ class SemanticsTextEditingStrategy extends DefaultTextEditingStrategy {
 /// This role is implemented via a content-editable HTML element. This role does
 /// not proactively switch modes depending on the current
 /// [EngineSemanticsOwner.gestureMode]. However, in Chrome on Android it ignores
-/// browser gestures when in pointer mode. In Safari on iOS touch events are
+/// browser gestures when in pointer mode. In Safari on iOS pointer events are
 /// used to detect text box invocation. This is because Safari issues touch
 /// events even when Voiceover is enabled.
 class TextField extends RoleManager {
   TextField(SemanticsObject semanticsObject)
       : super(Role.textField, semanticsObject) {
-    editableElement =
-        semanticsObject.hasFlag(ui.SemanticsFlag.isMultiline)
-            ? createDomHTMLTextAreaElement()
-            : createDomHTMLInputElement();
     _setupDomElement();
   }
 
   /// The element used for editing, e.g. `<input>`, `<textarea>`.
-  late final DomHTMLElement editableElement;
+  DomHTMLElement? editableElement;
+
+  /// Same as [editableElement] but null-checked.
+  DomHTMLElement get activeEditableElement {
+    assert(
+      editableElement != null,
+      'The textField does not have an active editable element',
+    );
+    return editableElement!;
+  }
+
+  /// Timer that times when to set the location of the input text.
+  ///
+  /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
+  /// There is no callback to know if the keyboard is up and how much the screen
+  /// has shifted. Therefore instead of listening to the shift and passing this
+  /// information to Flutter Framework, we are trying to stop the shift.
+  ///
+  /// In iOS, the virtual keyboard shifts the screen up if the focused input
+  /// element is under the keyboard or very close to the keyboard. Before the
+  /// focus is called we are positioning it offscreen. The location of the input
+  /// in iOS is set to correct place, 100ms after focus. We use this timer for
+  /// timing this delay.
+  Timer? _positionInputElementTimer;
+  static const Duration _delayBeforePlacement = Duration(milliseconds: 100);
+
+  void _initializeEditableElement() {
+    assert(editableElement == null,
+        'Editable element has already been initialized');
+
+    editableElement = semanticsObject.hasFlag(ui.SemanticsFlag.isMultiline)
+        ? createDomHTMLTextAreaElement()
+        : createDomHTMLInputElement();
 
-  void _setupDomElement() {
     // On iOS, even though the semantic text field is transparent, the cursor
     // and text highlighting are still visible. The cursor and text selection
     // are made invisible by CSS in [FlutterViewEmbedder.reset].
     // But there's one more case where iOS highlights text. That's when there's
     // and autocorrect suggestion. To disable that, we have to do the following:
-    editableElement
+    activeEditableElement
       ..spellcheck = false
       ..setAttribute('autocorrect', 'off')
       ..setAttribute('autocomplete', 'off')
       ..setAttribute('data-semantics-role', 'text-field');
 
-    editableElement.style
+    activeEditableElement.style
       ..position = 'absolute'
       // `top` and `left` are intentionally set to zero here.
       //
@@ -248,8 +278,10 @@ class TextField extends RoleManager {
       ..left = '0'
       ..width = '${semanticsObject.rect!.width}px'
       ..height = '${semanticsObject.rect!.height}px';
-    semanticsObject.element.append(editableElement);
+    semanticsObject.element.append(activeEditableElement);
+  }
 
+  void _setupDomElement() {
     switch (browserEngine) {
       case BrowserEngine.blink:
       case BrowserEngine.firefox:
@@ -266,8 +298,9 @@ class TextField extends RoleManager {
   /// When in browser gesture mode, the focus is forwarded to the framework as
   /// a tap to initialize editing.
   void _initializeForBlink() {
-    editableElement.addEventListener(
-        'focus', allowInterop((DomEvent event) {
+    _initializeEditableElement();
+    activeEditableElement.addEventListener('focus',
+        allowInterop((DomEvent event) {
           if (semanticsObject.owner.gestureMode != GestureMode.browserGestures) {
             return;
           }
@@ -277,29 +310,45 @@ class TextField extends RoleManager {
         }));
   }
 
-  /// Safari on iOS reports text field activation via touch events.
+  /// Safari on iOS reports text field activation via pointer events.
   ///
-  /// This emulates a tap recognizer to detect the activation. Because touch
+  /// This emulates a tap recognizer to detect the activation. Because pointer
   /// events are present regardless of whether accessibility is enabled or not,
   /// this mode is always enabled.
+  ///
+  /// In iOS, the virtual keyboard shifts the screen up if the focused input
+  /// element is under the keyboard or very close to the keyboard. To avoid the shift,
+  /// the creation of the editable element is delayed until a tap is detected.
+  ///
+  /// In the absence of an editable DOM element, role of 'textbox' is assigned to the
+  /// semanticsObject.element to communicate to the assistive technologies that
+  /// the user can start editing by tapping on the element. Once a tap is detected,
+  /// the editable element gets created and the role of textbox is removed from
+  /// semanicsObject.element to avoid confusing VoiceOver.
   void _initializeForWebkit() {
     // Safari for desktop is also initialized as the other browsers.
     if (operatingSystem == OperatingSystem.macOs) {
       _initializeForBlink();
       return;
     }
+
+    semanticsObject.element
+      ..setAttribute('role', 'textbox')
+      ..setAttribute('contenteditable', 'false')
+      ..setAttribute('tabindex', '0');
+
     num? lastPointerDownOffsetX;
     num? lastPointerDownOffsetY;
 
-    editableElement.addEventListener('pointerdown',
+    semanticsObject.element.addEventListener('pointerdown',
         allowInterop((DomEvent event) {
           final DomPointerEvent pointerEvent = event as DomPointerEvent;
           lastPointerDownOffsetX = pointerEvent.clientX;
           lastPointerDownOffsetY = pointerEvent.clientY;
         }), true);
 
-    editableElement.addEventListener(
-        'pointerup', allowInterop((DomEvent event) {
+    semanticsObject.element.addEventListener('pointerup',
+        allowInterop((DomEvent event) {
       final DomPointerEvent pointerEvent = event as DomPointerEvent;
 
       if (lastPointerDownOffsetX != null) {
@@ -318,19 +367,7 @@ class TextField extends RoleManager {
           // Recognize it as a tap that requires a keyboard.
           EnginePlatformDispatcher.instance.invokeOnSemanticsAction(
               semanticsObject.id, ui.SemanticsAction.tap, null);
-
-          // We need to call focus for the following scenario:
-          // 1. The virtial keyboard in iOS gets dismissed by the 'Done' button
-          // located at the top right of the keyboard.
-          // 2. The user tries to focus on the input field again, either by
-          // VoiceOver or manually, but the keyboard does not show up.
-          //
-          // In this scenario, the Flutter framework does not send a semantic update,
-          // so we need to call focus after detecting a tap to make sure that the
-          // virtual keyboard will show.
-          if (semanticsObject.hasFocus) {
-            editableElement.focus();
-          }
+          _invokeIosWorkaround();
         }
       } else {
         assert(lastPointerDownOffsetY == null);
@@ -341,66 +378,88 @@ class TextField extends RoleManager {
     }), true);
   }
 
-  bool _hasFocused = false;
-
-  @override
-  void update() {
-    // The user is editing the semantic text field directly, so there's no need
-    // to do any update here.
-    if (semanticsObject.hasLabel) {
-      editableElement.setAttribute(
-        'aria-label',
-        semanticsObject.label!,
-      );
-    } else {
-      editableElement.removeAttribute('aria-label');
+  void _invokeIosWorkaround() {
+    if (editableElement != null) {
+      return;
     }
 
-    editableElement.style
-      ..width = '${semanticsObject.rect!.width}px'
-      ..height = '${semanticsObject.rect!.height}px';
+    _initializeEditableElement();
+    activeEditableElement.style.transform = 'translate(${offScreenOffset}px, ${offScreenOffset}px)';
+    _positionInputElementTimer?.cancel();
+    _positionInputElementTimer = Timer(_delayBeforePlacement, () {
+      editableElement?.style.transform = '';
+      _positionInputElementTimer = null;
+    });
+
+    // Can not have both activeEditableElement and semanticsObject.element
+    // represent the same text field. It will confuse VoiceOver, so `role` needs to
+    // be assigned and removed, based on whether or not editableElement exists.
+    activeEditableElement.focus();
+    semanticsObject.element.removeAttribute('role');
+
+    activeEditableElement.addEventListener('blur',
+        allowInterop((DomEvent event) {
+      semanticsObject.element.setAttribute('role', 'textbox');
+      activeEditableElement.remove();
+      SemanticsTextEditingStrategy.instance.deactivate(this);
 
-    // Whether we should request that the browser shift focus to the editable
-    // element, so that both the framework and the browser agree on what's
-    // currently focused.
-    bool needsDomFocusRequest = false;
+      // Focus on semantics element before removing the editable element, so that
+      // the user can continue navigating the page with the assistive technology.
+      semanticsObject.element.focus();
+      editableElement = null;
+    }));
+  }
 
-    if (semanticsObject.hasFocus) {
-      if (!_hasFocused) {
-        _hasFocused = true;
+  @override
+  void update() {
+    // Ignore the update if editableElement has not been created yet.
+    // On iOS Safari, when the user dismisses the keyboard using the 'done' button,
+    // we recieve a `blur` event from the browswer and a semantic update with
+    // [hasFocus] set to true from the framework. In this case, we ignore the update
+    // and wait for a tap event before invoking the iOS workaround and creating
+    // the editable element.
+    if (editableElement != null) {
+      activeEditableElement.style
+        ..width = '${semanticsObject.rect!.width}px'
+        ..height = '${semanticsObject.rect!.height}px';
+
+      if (semanticsObject.hasFocus) {
+        if (flutterViewEmbedder.glassPaneShadow!.activeElement !=
+            activeEditableElement) {
+          semanticsObject.owner.addOneTimePostUpdateCallback(() {
+            activeEditableElement.focus();
+          });
+        }
         SemanticsTextEditingStrategy.instance.activate(this);
-        needsDomFocusRequest = true;
-      }
-      if (domDocument.activeElement != editableElement) {
-        needsDomFocusRequest = true;
-      }
-    } else if (_hasFocused) {
-      SemanticsTextEditingStrategy.instance.deactivate(this);
-
-      if (_hasFocused && domDocument.activeElement == editableElement) {
-        // Unlike `editableElement.focus()` we don't need to schedule `blur`
-        // post-update because `document.activeElement` implies that the
-        // element is already attached to the DOM. If it's not, it can't
-        // possibly be focused and therefore there's no need to blur.
-        editableElement.blur();
+      } else if (flutterViewEmbedder.glassPaneShadow!.activeElement ==
+          activeEditableElement) {
+        if (!isIosSafari) {
+          SemanticsTextEditingStrategy.instance.deactivate(this);
+          // Only apply text, because this node is not focused.
+        }
+        activeEditableElement.blur();
       }
-      _hasFocused = false;
     }
 
-    if (needsDomFocusRequest) {
-      // Schedule focus post-update to make sure the element is attached to
-      // the document. Otherwise focus() has no effect.
-      semanticsObject.owner.addOneTimePostUpdateCallback(() {
-        if (domDocument.activeElement != editableElement) {
-          editableElement.focus();
-        }
-      });
+    final DomElement element = editableElement ?? semanticsObject.element;
+    if (semanticsObject.hasLabel) {
+      element.setAttribute(
+        'aria-label',
+        semanticsObject.label!,
+      );
+    } else {
+      element.removeAttribute('aria-label');
     }
   }
 
   @override
   void dispose() {
-    editableElement.remove();
+    _positionInputElementTimer?.cancel();
+    _positionInputElementTimer = null;
+    // on iOS, the `blur` event listener callback will remove the element.
+    if (!isIosSafari) {
+      editableElement?.remove();
+    }
     SemanticsTextEditingStrategy.instance.deactivate(this);
   }
 }
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index 76b5b4543ca2a..b2cf2ba6f3a2c 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -34,6 +34,9 @@ bool _debugPrintTextInputCommands = false;
 /// The `keyCode` of the "Enter" key.
 const int _kReturnKeyCode = 13;
 
+/// Offset in pixels to place an element outside of the screen.
+const int offScreenOffset = -9999;
+
 /// Blink and Webkit engines, bring an overlay on top of the text field when it
 /// is autofilled.
 bool browserHasAutofillOverlay() =>
@@ -119,8 +122,8 @@ void _hideAutofillElements(DomHTMLElement domElement,
 
   if (isOffScreen) {
     elementStyle
-      ..top = '-9999px'
-      ..left = '-9999px';
+      ..top = '${offScreenOffset}px'
+      ..left = '${offScreenOffset}px';
   }
 
   if (browserHasAutofillOverlay()) {
@@ -1509,7 +1512,7 @@ class IOSTextEditingStrategy extends GloballyPositionedTextEditingStrategy {
     /// Position the element outside of the page before focusing on it. This is
     /// useful for not triggering a scroll when iOS virtual keyboard is
     /// coming up.
-    activeDomElement.style.transform = 'translate(-9999px, -9999px)';
+    activeDomElement.style.transform = 'translate(${offScreenOffset}px, ${offScreenOffset}px)';
 
     _canPosition = false;
   }
diff --git a/lib/web_ui/test/engine/semantics/text_field_test.dart b/lib/web_ui/test/engine/semantics/text_field_test.dart
index fb87725ea3630..183520433724c 100644
--- a/lib/web_ui/test/engine/semantics/text_field_test.dart
+++ b/lib/web_ui/test/engine/semantics/text_field_test.dart
@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 @TestOn('chrome || safari || firefox')
-
 import 'dart:typed_data';
 
 import 'package:test/bootstrap/browser.dart';
@@ -48,73 +47,28 @@ void testMain() {
       strategy = SemanticsTextEditingStrategy.instance;
       testTextEditing.debugTextEditingStrategyOverride = strategy;
       testTextEditing.configuration = singlelineConfig;
+      semantics()
+        ..debugOverrideTimestampFunction(() => _testTime)
+        ..semanticsEnabled = true;
     });
 
-    /// Emulates sending of a message by the framework to the engine.
-    void sendFrameworkMessage(ByteData? message) {
-      testTextEditing.channel.handleTextInput(message, (ByteData? data) {});
-    }
-
-  test('renders a text field', () async {
-    semantics()
-      ..debugOverrideTimestampFunction(() => _testTime)
-      ..semanticsEnabled = true;
+    tearDown(() {
+      semantics().semanticsEnabled = false;
+    });
 
+  test('renders a text field', () {
     createTextFieldSemantics(value: 'hello');
 
     expectSemanticsTree('''
 <sem style="$rootSemanticStyle">
   <input value="hello" />
 </sem>''');
-
-    semantics().semanticsEnabled = false;
-  });
-
-  test('tap detection works', () async {
-    debugBrowserEngineOverride = BrowserEngine.webkit;
-    debugOperatingSystemOverride = OperatingSystem.iOs;
-
-    final SemanticsActionLogger logger = SemanticsActionLogger();
-    semantics()
-      ..debugOverrideTimestampFunction(() => _testTime)
-      ..semanticsEnabled = true;
-
-    createTextFieldSemantics(value: 'hello');
-
-    final DomElement textField = appHostNode
-        .querySelector('input[data-semantics-role="text-field"]')!;
-
-    textField.dispatchEvent(createDomPointerEvent(
-        'pointerdown',
-        <Object?, Object?>{
-          'clientX': 25,
-          'clientY': 48,
-        },
-      ));
-    textField.dispatchEvent(createDomPointerEvent(
-        'pointerup',
-        <Object?, Object?>{
-          'clientX': 26,
-          'clientY': 48,
-        },
-      ));
-
-    expect(await logger.idLog.first, 0);
-    expect(await logger.actionLog.first, ui.SemanticsAction.tap);
-
-    semantics().semanticsEnabled = false;
-    debugBrowserEngineOverride = null;
-    debugOperatingSystemOverride = null;
   });
 
   // TODO(yjbanov): this test will need to be adjusted for Safari when we add
   //                Safari testing.
   test('sends a tap action when browser requests focus', () async {
     final SemanticsActionLogger logger = SemanticsActionLogger();
-    semantics()
-      ..debugOverrideTimestampFunction(() => _testTime)
-      ..semanticsEnabled = true;
-
     createTextFieldSemantics(value: 'hello');
 
     final DomElement textField = appHostNode
@@ -127,18 +81,12 @@ void testMain() {
     expect(appHostNode.activeElement, textField);
     expect(await logger.idLog.first, 0);
     expect(await logger.actionLog.first, ui.SemanticsAction.tap);
-
-    semantics().semanticsEnabled = false;
-  },  // TODO(yjbanov): https://github.com/flutter/flutter/issues/46638
+    }, // TODO(yjbanov): https://github.com/flutter/flutter/issues/46638
       // TODO(yjbanov): https://github.com/flutter/flutter/issues/50590
       // TODO(yjbanov): https://github.com/flutter/flutter/issues/50754
       skip: browserEngine != BrowserEngine.blink);
 
-    test('Syncs semantic state from framework', () async {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
+    test('Syncs semantic state from framework', () {
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
 
@@ -162,13 +110,14 @@ void testMain() {
         rect: const ui.Rect.fromLTWH(0, 0, 10, 15),
       );
 
-      final TextField textField = textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
       expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
       expect(appHostNode.activeElement, strategy.domElement);
       expect(textField.editableElement, strategy.domElement);
-      expect(textField.editableElement.getAttribute('aria-label'), 'greeting');
-      expect(textField.editableElement.style.width, '10px');
-      expect(textField.editableElement.style.height, '15px');
+      expect(textField.activeEditableElement.getAttribute('aria-label'), 'greeting');
+      expect(textField.activeEditableElement.style.width, '10px');
+      expect(textField.activeEditableElement.style.height, '15px');
 
       // Update
       createTextFieldSemantics(
@@ -180,12 +129,11 @@ void testMain() {
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
       expect(strategy.domElement, null);
-      expect(textField.editableElement.getAttribute('aria-label'), 'farewell');
-      expect(textField.editableElement.style.width, '12px');
-      expect(textField.editableElement.style.height, '17px');
+      expect(textField.activeEditableElement.getAttribute('aria-label'), 'farewell');
+      expect(textField.activeEditableElement.style.width, '12px');
+      expect(textField.activeEditableElement.style.height, '17px');
 
       strategy.disable();
-      semantics().semanticsEnabled = false;
 
       // There was no user interaction with the <input> element,
       // so we should expect no engine-to-framework feedback.
@@ -195,11 +143,7 @@ void testMain() {
 
     test(
         'Does not overwrite text value and selection editing state on semantic updates',
-        () async {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
+        () {
       strategy.enable(
         singlelineConfig,
         onChange: (_, __) {},
@@ -216,7 +160,7 @@ void testMain() {
       final TextField textField =
           textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
       final DomHTMLInputElement editableElement =
-          textField.editableElement as DomHTMLInputElement;
+          textField.activeEditableElement as DomHTMLInputElement;
 
       expect(editableElement, strategy.domElement);
       expect(editableElement.value, '');
@@ -224,16 +168,11 @@ void testMain() {
       expect(editableElement.selectionEnd, 0);
 
       strategy.disable();
-      semantics().semanticsEnabled = false;
     });
 
     test(
         'Updates editing state when receiving framework messages from the text input channel',
-        () async {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
+        () {
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
 
@@ -253,7 +192,7 @@ void testMain() {
       final TextField textField =
           textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
       final DomHTMLInputElement editableElement =
-          textField.editableElement as DomHTMLInputElement;
+          textField.activeEditableElement as DomHTMLInputElement;
 
       // No updates expected on semantic updates
       expect(editableElement, strategy.domElement);
@@ -268,7 +207,7 @@ void testMain() {
         'selectionBase': 2,
         'selectionExtent': 3,
       });
-      sendFrameworkMessage(codec.encodeMethodCall(setEditingState));
+      sendFrameworkMessage(codec.encodeMethodCall(setEditingState), testTextEditing);
 
       // Editing state should now be updated
       expect(editableElement.value, 'updated');
@@ -276,14 +215,9 @@ void testMain() {
       expect(editableElement.selectionEnd, 3);
 
       strategy.disable();
-      semantics().semanticsEnabled = false;
     });
 
-    test('Gives up focus after DOM blur', () async {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
+    test('Gives up focus after DOM blur', () {
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
 
@@ -297,24 +231,20 @@ void testMain() {
         isFocused: true,
       );
 
-      final TextField textField = textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
       expect(textField.editableElement, strategy.domElement);
       expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
       expect(appHostNode.activeElement, strategy.domElement);
 
       // The input should not refocus after blur.
-      textField.editableElement.blur();
+      textField.activeEditableElement.blur();
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
       strategy.disable();
-      semantics().semanticsEnabled = false;
     });
 
     test('Does not dispose and recreate dom elements in persistent mode', () {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
       strategy.enable(
         singlelineConfig,
         onChange: (_, __) {},
@@ -337,20 +267,16 @@ void testMain() {
       expect(strategy.domElement, isNull);
 
       // It doesn't remove the DOM element.
-      final TextField textField = textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
       expect(appHostNode.contains(textField.editableElement), isTrue);
       // Editing element is not enabled.
       expect(strategy.isEnabled, isFalse);
       expect(domDocument.activeElement, domDocument.body);
       expect(appHostNode.activeElement, null);
-      semantics().semanticsEnabled = false;
     });
 
     test('Refocuses when setting editing state', () {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
       strategy.enable(
         singlelineConfig,
         onChange: (_, __) {},
@@ -390,14 +316,9 @@ void testMain() {
       expect(appHostNode.activeElement, strategy.domElement);
 
       strategy.disable();
-      semantics().semanticsEnabled = false;
     });
 
     test('Works in multi-line mode', () {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
       strategy.enable(
         multilineConfig,
         onChange: (_, __) {},
@@ -409,7 +330,8 @@ void testMain() {
         isMultiline: true,
       );
 
-      final DomHTMLTextAreaElement textArea = strategy.domElement! as DomHTMLTextAreaElement;
+      final DomHTMLTextAreaElement textArea =
+          strategy.domElement! as DomHTMLTextAreaElement;
 
       expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
       expect(appHostNode.activeElement, strategy.domElement);
@@ -429,14 +351,9 @@ void testMain() {
       expect(appHostNode.contains(textArea), isTrue);
       // Editing element is not enabled.
       expect(strategy.isEnabled, isFalse);
-      semantics().semanticsEnabled = false;
     });
 
     test('Does not position or size its DOM element', () {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
       strategy.enable(
         singlelineConfig,
         onChange: (_, __) {},
@@ -473,10 +390,10 @@ void testMain() {
       checkPlacementIsSetBySemantics();
       strategy.placeElement();
       checkPlacementIsSetBySemantics();
-      semantics().semanticsEnabled = false;
     });
 
-    Map<int, SemanticsObject> createTwoFieldSemantics(SemanticsTester builder, { int? focusFieldId }) {
+    Map<int, SemanticsObject> createTwoFieldSemantics(SemanticsTester builder,
+        {int? focusFieldId}) {
       builder.updateNode(
         id: 0,
         children: <SemanticsNodeUpdate>[
@@ -499,11 +416,7 @@ void testMain() {
       return builder.apply();
     }
 
-    test('Changes focus from one text field to another through a semantics update', () async {
-      semantics()
-        ..debugOverrideTimestampFunction(() => _testTime)
-        ..semanticsEnabled = true;
-
+    test('Changes focus from one text field to another through a semantics update', () {
       strategy.enable(
         singlelineConfig,
         onChange: (_, __) {},
@@ -525,10 +438,435 @@ void testMain() {
         expect(appHostNode.activeElement, tester.getTextField(2).editableElement);
         expect(strategy.domElement, tester.getTextField(2).editableElement);
       }
+    });
+  }, skip: isIosSafari);
+
+  group('$SemanticsTextEditingStrategy in iOS', () {
+    late HybridTextEditing testTextEditing;
+    late SemanticsTextEditingStrategy strategy;
 
+    setUp(() {
+      testTextEditing = HybridTextEditing();
+      SemanticsTextEditingStrategy.ensureInitialized(testTextEditing);
+      strategy = SemanticsTextEditingStrategy.instance;
+      testTextEditing.debugTextEditingStrategyOverride = strategy;
+      testTextEditing.configuration = singlelineConfig;
+      debugBrowserEngineOverride = BrowserEngine.webkit;
+      debugOperatingSystemOverride = OperatingSystem.iOs;
+      semantics()
+        ..debugOverrideTimestampFunction(() => _testTime)
+        ..semanticsEnabled = true;
+    });
+
+    tearDown(() {
+      debugBrowserEngineOverride = null;
+      debugOperatingSystemOverride = null;
       semantics().semanticsEnabled = false;
     });
-  });
+
+    test('does not render a text field', () {
+      expect(appHostNode.querySelector('flt-semantics[role="textbox"]'), isNull);
+      createTextFieldSemanticsForIos(value: 'hello');
+      expect(appHostNode.querySelector('flt-semantics[role="textbox"]'), isNotNull);
+    });
+
+    test('tap detection works', () async {
+      final SemanticsActionLogger logger = SemanticsActionLogger();
+      createTextFieldSemanticsForIos(value: 'hello');
+
+      final DomElement textField = appHostNode
+          .querySelector('flt-semantics[role="textbox"]')!;
+
+      simulateTap(textField);
+      expect(await logger.idLog.first, 0);
+      expect(await logger.actionLog.first, ui.SemanticsAction.tap);
+    });
+
+    test('Syncs semantic state from framework', () {
+      expect(domDocument.activeElement, domDocument.body);
+      expect(appHostNode.activeElement, null);
+
+      int changeCount = 0;
+      int actionCount = 0;
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {
+          changeCount++;
+        },
+        onAction: (_) {
+          actionCount++;
+        },
+      );
+
+      // Create
+      final SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+        value: 'hello',
+        label: 'greeting',
+        isFocused: true,
+        rect: const ui.Rect.fromLTWH(0, 0, 10, 15),
+      );
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+      expect(textField.editableElement, strategy.domElement);
+      expect(textField.activeEditableElement.getAttribute('aria-label'), 'greeting');
+      expect(textField.activeEditableElement.style.width, '10px');
+      expect(textField.activeEditableElement.style.height, '15px');
+
+      // Update
+      createTextFieldSemanticsForIos(
+        value: 'bye',
+        label: 'farewell',
+        rect: const ui.Rect.fromLTWH(0, 0, 12, 17),
+      );
+      final DomElement textBox =
+          appHostNode.querySelector('flt-semantics[role="textbox"]')!;
+
+      expect(strategy.domElement, null);
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, textBox);
+      expect(textBox.getAttribute('aria-label'), 'farewell');
+
+      strategy.disable();
+
+      // There was no user interaction with the <input> element,
+      // so we should expect no engine-to-framework feedback.
+      expect(changeCount, 0);
+      expect(actionCount, 0);
+    });
+
+    test(
+        'Does not overwrite text value and selection editing state on semantic updates',
+        () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      final SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+          value: 'hello',
+          textSelectionBase: 1,
+          textSelectionExtent: 3,
+          isFocused: true,
+          rect: const ui.Rect.fromLTWH(0, 0, 10, 15));
+
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      final DomHTMLInputElement editableElement =
+          textField.activeEditableElement as DomHTMLInputElement;
+
+      expect(editableElement, strategy.domElement);
+      expect(editableElement.value, '');
+      expect(editableElement.selectionStart, 0);
+      expect(editableElement.selectionEnd, 0);
+
+      strategy.disable();
+    });
+
+    test(
+        'Updates editing state when receiving framework messages from the text input channel',
+        () {
+      expect(domDocument.activeElement, domDocument.body);
+      expect(appHostNode.activeElement, null);
+
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      final SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+          value: 'hello',
+          textSelectionBase: 1,
+          textSelectionExtent: 3,
+          isFocused: true,
+          rect: const ui.Rect.fromLTWH(0, 0, 10, 15));
+
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      final DomHTMLInputElement editableElement =
+          textField.activeEditableElement as DomHTMLInputElement;
+
+      // No updates expected on semantic updates
+      expect(editableElement, strategy.domElement);
+      expect(editableElement.value, '');
+      expect(editableElement.selectionStart, 0);
+      expect(editableElement.selectionEnd, 0);
+
+      // Update from framework
+      const MethodCall setEditingState =
+          MethodCall('TextInput.setEditingState', <String, dynamic>{
+        'text': 'updated',
+        'selectionBase': 2,
+        'selectionExtent': 3,
+      });
+      sendFrameworkMessage(codec.encodeMethodCall(setEditingState), testTextEditing);
+
+      // Editing state should now be updated
+      // expect(editableElement.value, 'updated');
+      expect(editableElement.selectionStart, 2);
+      expect(editableElement.selectionEnd, 3);
+
+      strategy.disable();
+    });
+
+    test('Gives up focus after DOM blur', () {
+      expect(domDocument.activeElement, domDocument.body);
+      expect(appHostNode.activeElement, null);
+
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+      final SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+      );
+      final TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+
+      expect(textField.editableElement, strategy.domElement);
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+
+      // The input should not refocus after blur.
+      textField.activeEditableElement.blur();
+      final DomElement textBox =
+          appHostNode.querySelector('flt-semantics[role="textbox"]')!;
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, textBox);
+
+      strategy.disable();
+    });
+
+    test('Disposes and recreates dom elements in persistent mode', () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      // It doesn't create a new DOM element.
+      expect(strategy.domElement, isNull);
+
+      // During the semantics update the DOM element is created and is focused on.
+      final SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+      );
+      expect(strategy.domElement, isNotNull);
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+
+      strategy.disable();
+      expect(strategy.domElement, isNull);
+
+      // It removes the DOM element.
+      final TextField textField = textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      expect(appHostNode.contains(textField.editableElement), isFalse);
+      // Editing element is not enabled.
+      expect(strategy.isEnabled, isFalse);
+      // Focus is on the semantic object
+      final DomElement textBox =
+          appHostNode.querySelector('flt-semantics[role="textbox"]')!;
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, textBox);
+    });
+
+    test('Refocuses when setting editing state', () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+      );
+      expect(strategy.domElement, isNotNull);
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+
+      // Blur the element without telling the framework.
+      strategy.activeDomElement.blur();
+      final DomElement textBox =
+          appHostNode.querySelector('flt-semantics[role="textbox"]')!;
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, textBox);
+
+      // The input will have focus after editing state is set and semantics updated.
+      strategy.setEditingState(EditingState(text: 'foo'));
+
+      // NOTE: at this point some browsers, e.g. some versions of Safari will
+      //       have set the focus on the editing element as a result of setting
+      //       the test selection range. Other browsers require an explicit call
+      //       to `element.focus()` for the element to acquire focus. So far,
+      //       this discrepancy hasn't caused issues, so we're not checking for
+      //       any particular focus state between setEditingState and
+      //       createTextFieldSemantics. However, this is something for us to
+      //       keep in mind in case this causes issues in the future.
+
+      createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+      );
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+
+      strategy.disable();
+    });
+
+    test('Works in multi-line mode', () {
+      strategy.enable(
+        multilineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+      createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+        isMultiline: true,
+      );
+
+      final DomHTMLTextAreaElement textArea = strategy.domElement! as DomHTMLTextAreaElement;
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, strategy.domElement);
+
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      expect(appHostNode.contains(textArea), isTrue);
+
+      textArea.blur();
+      final DomElement textBox =
+          appHostNode.querySelector('flt-semantics[role="textbox"]')!;
+
+      expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+      expect(appHostNode.activeElement, textBox);
+
+      strategy.disable();
+      // It removes the textarea from the DOM.
+      expect(appHostNode.contains(textArea), isFalse);
+      // Editing element is not enabled.
+      expect(strategy.isEnabled, isFalse);
+    });
+
+    test('Does not position or size its DOM element', () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      // Send width and height that are different from semantics values on
+      // purpose.
+      final Matrix4 transform = Matrix4.translationValues(14, 15, 0);
+      final EditableTextGeometry geometry = EditableTextGeometry(
+        height: 12,
+        width: 13,
+        globalTransform: transform.storage,
+      );
+      const ui.Rect semanticsRect = ui.Rect.fromLTRB(0, 0, 100, 50);
+
+      testTextEditing.acceptCommand(
+        TextInputSetEditableSizeAndTransform(geometry: geometry),
+        () {},
+      );
+
+      createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+      );
+
+      // Checks that the placement attributes come from semantics and not from
+      // EditableTextGeometry.
+      void checkPlacementIsSetBySemantics() {
+        expect(strategy.activeDomElement.style.transform,
+            isNot(equals(transform.toString())));
+        expect(strategy.activeDomElement.style.width, '${semanticsRect.width}px');
+        expect(strategy.activeDomElement.style.height, '${semanticsRect.height}px');
+      }
+
+      checkPlacementIsSetBySemantics();
+      strategy.placeElement();
+      checkPlacementIsSetBySemantics();
+    });
+
+    test('Changes focus from one text field to another through a semantics update', () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+
+      // Switch between the two fields a few times.
+      for (int i = 0; i < 1; i++) {
+        final SemanticsTester tester = SemanticsTester(semantics());
+        createTwoFieldSemanticsForIos(tester, focusFieldId: 1);
+
+        expect(tester.apply().length, 3);
+        expect(domDocument.activeElement, flutterViewEmbedder.glassPaneElement);
+        expect(appHostNode.activeElement, tester.getTextField(1).editableElement);
+        expect(strategy.domElement, tester.getTextField(1).editableElement);
+
+        createTwoFieldSemanticsForIos(tester, focusFieldId: 2);
+        expect(tester.apply().length, 3);
+        expect(appHostNode.activeElement, tester.getTextField(2).editableElement);
+        expect(strategy.domElement, tester.getTextField(2).editableElement);
+      }
+    });
+
+    test('input transform is correct', () async {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+      createTextFieldSemanticsForIos(
+        value: 'hello',
+        isFocused: true,
+        );
+      expect(strategy.activeDomElement.style.transform, 'translate(${offScreenOffset}px, ${offScreenOffset}px)');
+      // See [_delayBeforePlacement].
+      await Future<void>.delayed(const Duration(milliseconds: 120) , (){});
+      expect(strategy.activeDomElement.style.transform, '');
+    });
+
+    test('disposes the editable element, if there is one', () {
+      strategy.enable(
+        singlelineConfig,
+        onChange: (_, __) {},
+        onAction: (_) {},
+      );
+      SemanticsObject textFieldSemantics = createTextFieldSemanticsForIos(
+        value: 'hello',
+      );
+      TextField textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+      expect(textField.editableElement, isNull);
+      textField.dispose();
+      expect(textField.editableElement, isNull);
+
+      textFieldSemantics = createTextFieldSemanticsForIos(
+        value: 'hi',
+        isFocused: true,
+      );
+      textField =
+          textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+
+      expect(textField.editableElement, isNotNull);
+      textField.dispose();
+      expect(textField.editableElement, isNull);
+    });
+  }, skip: !isSafari);
 }
 
 SemanticsObject createTextFieldSemantics({
@@ -557,3 +895,121 @@ SemanticsObject createTextFieldSemantics({
   tester.apply();
   return tester.getSemanticsObject(0);
 }
+
+void simulateTap(DomElement element) {
+  element.dispatchEvent(createDomPointerEvent(
+    'pointerdown',
+    <Object?, Object?>{
+      'clientX': 125,
+      'clientY': 248,
+    },
+  ));
+  element.dispatchEvent(createDomPointerEvent(
+    'pointerup',
+    <Object?, Object?>{
+      'clientX': 126,
+      'clientY': 248,
+    },
+  ));
+}
+
+/// An editable DOM element won't be created on iOS unless a tap is detected.
+/// This function mimics the workflow by simulating a tap and sending a second
+/// semantic update.
+SemanticsObject createTextFieldSemanticsForIos({
+  required String value,
+  String label = '',
+  bool isFocused = false,
+  bool isMultiline = false,
+  ui.Rect rect = const ui.Rect.fromLTRB(0, 0, 100, 50),
+  int textSelectionBase = 0,
+  int textSelectionExtent = 0,
+}) {
+  final SemanticsObject textFieldSemantics = createTextFieldSemantics(
+    value: value,
+    isFocused: isFocused,
+    label: label,
+    isMultiline: isMultiline,
+    rect: rect,
+    textSelectionBase: textSelectionBase,
+    textSelectionExtent: textSelectionExtent,
+  );
+
+  if (isFocused) {
+    final TextField textField =
+        textFieldSemantics.debugRoleManagerFor(Role.textField)! as TextField;
+
+    simulateTap(textField.semanticsObject.element);
+
+    return createTextFieldSemantics(
+      value: value,
+      isFocused: isFocused,
+      label: label,
+      isMultiline: isMultiline,
+      rect: rect,
+      textSelectionBase: textSelectionBase,
+      textSelectionExtent: textSelectionExtent,
+    );
+  }
+  return textFieldSemantics;
+}
+
+/// See [createTextFieldSemanticsForIos].
+Map<int, SemanticsObject> createTwoFieldSemanticsForIos(SemanticsTester builder,
+    {int? focusFieldId}) {
+  builder.updateNode(
+    id: 0,
+    children: <SemanticsNodeUpdate>[
+      builder.updateNode(
+        id: 1,
+        isTextField: true,
+        value: 'Hello',
+        label: 'Hello',
+        isFocused: false,
+        rect: const ui.Rect.fromLTWH(0, 0, 10, 10),
+      ),
+      builder.updateNode(
+        id: 2,
+        isTextField: true,
+        value: 'World',
+        label: 'World',
+        isFocused: false,
+        rect: const ui.Rect.fromLTWH(20, 20, 10, 10),
+      ),
+    ],
+  );
+  builder.apply();
+  final String label = focusFieldId == 1 ? 'Hello' : 'World';
+  final DomElement textBox =
+      appHostNode.querySelector('flt-semantics[aria-label="$label"]')!;
+
+  simulateTap(textBox);
+
+  builder.updateNode(
+    id: 0,
+    children: <SemanticsNodeUpdate>[
+      builder.updateNode(
+        id: 1,
+        isTextField: true,
+        value: 'Hello',
+        label: 'Hello',
+        isFocused: focusFieldId == 1,
+        rect: const ui.Rect.fromLTWH(0, 0, 10, 10),
+      ),
+      builder.updateNode(
+        id: 2,
+        isTextField: true,
+        value: 'World',
+        label: 'World',
+        isFocused: focusFieldId == 2,
+        rect: const ui.Rect.fromLTWH(20, 20, 10, 10),
+      ),
+    ],
+  );
+  return builder.apply();
+}
+
+/// Emulates sending of a message by the framework to the engine.
+void sendFrameworkMessage(ByteData? message, HybridTextEditing testTextEditing) {
+  testTextEditing.channel.handleTextInput(message, (ByteData? data) {});
+}