Why the same Css snippet, in osx normal, in ios can not be displayed properly

above is osx, below is ios

css snippet:

/**************************************/
/* 5. WYSIWYG: imitation in Edit mode */
/**************************************/
/* Source: various people on forum, incl. Piotr and pihentagy
/**************************************/
/* Editor font: make thicker so it is like in Preview
/* Remove markdown clutter
/* Unordered lists: turn into bullets as you type, as per Typora
/* Underline H1 heading in Edit mode
/* Blockquote in edit mode with left border rendered instead of ">"
/* Tag pills in edit mode
/* Coloured headings for editor and preview, same font-weight in Edit & Preview
/* ============================================================================*/

/* For Edit mode use same font and font size as for Preview mode */

/* Editor font: make thicker so it is like in Preview */
.cm-s-obsidian .CodeMirror-line * {
  -webkit-font-smoothing: auto;
}

/* Remove markdown clutter */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag {
  display: none !important;
} 

/* except numbered list */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list {
 display: inline !important;
}

/* except task checkboxes */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task {
  display: inline !important;
 }

/* except list markers */ span.cm-formatting-list,
/*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock,
/* optionally header hashes */ /*span.cm-formatting-header
{ display: inline !important; }

/* and task checkboxes */
span.cm-formatting-task { display: inline !important; font-family: monospace; }

/* highlight color */
.theme-dark {
  --text-highlight-bg: rgba(120, 50, 250, 0.4);
}
/* highlight (==) not visible anymore if not active line */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
font-size: 0;
}

/* Unordered lists: turn into bullets as you type, as per Typora */
span.cm-formatting-list-ul {
visibility: hidden !important;
}
  
span.cm-formatting-list-ul:after {
content: '• ';
margin-left: -12px;
color: var(--text-normal);
visibility: visible !important;
}

/* Underline H1 heading in Edit mode */
.cm-s-obsidian pre.HyperMD-header-1:after {
content: "";
position: absolute;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
height: 1px;
background: var(--text-accent); /* rgb(123, 108, 214); */
}

/* Blockquote: in edit mode with left border rendered instead of > */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote {
display: inline !important;
color: transparent !important;
}

div:not(.CodeMirror-activeline)>.HyperMD-quote {
 background-color:rgb(238, 234, 234);
 border-left: 3px solid var(--text-selection);
 border-color: red !important; 
 border-radius: 0 8px 8px 0;
 font-size: 17px;
 line-height: 1.5em;
 margin-left: 5px;
 padding: 12px 10px 15px 8.5px;
 display: inline-block;
}

/* Tag pills in edit mode */
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
 content: '';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: rgba(123, 108, 214); /* wasvar(--text-accent); */
border: none;
color: white !important;
font-size: 14px;
padding: 0px 8px;
padding-top: -2px;
padding-bottom: 3px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 1px 1px;
cursor: pointer;
border-radius: 14px;
}

.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}

/* Coloured headings for editor and preview, same font-weight in Edit & Preview */
.cm-s-obsidian .cm-header-1,
.markdown-preview-view h1 {
font-weight: 450;
color: rgb(123, 108, 214); /* was(115, 98, 205); */
}

.cm-s-obsidian .cm-header-2,
.markdown-preview-view h2 {
font-weight: 450;
color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-3,
.markdown-preview-view h3 {
font-weight: 450;
color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-4,
.markdown-preview-view h4 {
font-weight: 450;
color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-5,
.markdown-preview-view h5 {
font-weight: 450;
color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-6,
.markdown-preview-view h6 {
font-weight: 450;
color: rgb(123, 108, 214);
}

/* Show line numbers only on hover */
.theme-dark
.cm-s-obsidian .CodeMirror-linenumber {
  opacity : 0;
}

.cm-s-obsidian .CodeMirror-linenumber:hover {
  opacity: 1;
}

Different editors