8.6 C
Canberra
Friday, May 29, 2026

swift – iOS WKWebView contenteditable: WebKit injecting font-size inline type on spans


When utilizing a WKWebView with a contenteditable div as a textual content editor, I’ve the next CSS utilized to the editor container:

#editor {
  font-size: 12pt;
}

At any time when the consumer accepts an autocorrect suggestion or QuickType prediction, WebKit mechanically wraps the affected textual content in a with specific inline kinds, for instance:


  corrected phrase

This solely occurs to textual content touched by autocorrect/prediction, not your complete paragraph, so the ensuing innerHTML turns into inconsistent.

What I’ve confirmed up to now:

  • The visible distinction seems to be precipitated particularly by font-size: 12pt

  • -webkit-text-size-adjust: 100% itself doesn’t seem to have an effect on rendering

  • This conduct doesn’t reproduce on desktop browsers

  • Seems to be particular to iOS WebKit / WKWebView

Questions:

  1. Is there any strategy to stop WebKit from materializing computed CSS into inline kinds throughout autocorrect, with out disabling autocorrect solely?

  2. Is that this conduct formally documented wherever?

  3. What precisely triggers this injection — solely autocorrect, or additionally QuickType, paste, spellcheck, and different enhancing operations?

  4. Is post-processing/sanitizing the generated HTML to strip these injected inline kinds thought of the usual workaround?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles