Adding CSS Styles to Modify Your Own WebView

So, I'm a bit stuck on this ... I am using a WebView in a part of our application, the reason for the WebView is that we are exiting the API endpoint that returns us an HTML string. The font size and other things in this HTML line are not meant to be used in a mobile app, so we're trying to add some stylistic changes to it for better visibility. I've seen people add style tags at the top of the html file to add certain html styles to the element and everything generally works, except that the font size in the WebView's HTML interface appears differently every time I click to the screen with the WebView it contains.

Here is the current code (style + html + script):

let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript

      

        
        
        
      

    

I also console logged this line with the debugger to make sure it is well stitched, and even created an index.html and inserted the exact line there to make sure it just displays correctly there.

Here is the style line:

let htmlStyle = `<style>
                        #height-calculator {
                          margin: 0;
                          padding: 0;
                        }
                        #height-calculator {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            margin: 0;
                            padding: 0;
                        }
                        body {
                          width:100%;
                        }
                        h2 {
                          font-size: 48px;
                        }
                        p {
                          font-size: 18px;
                        }
                        h3 {
                          font-size: 32px
                        }
                        img {
                          width:98%;
                        }
                        td {
                          display: block !important;
                          width: 95% !important;
                        }
                        img {
                          width:98%;
                        }
                        hr {
                          width: 98%;
                        }
                        ol li ol li ol li {
                          position: relative; right: 85px;
                        }
                        ul {
                          width: 98%,
                          margin-left: -25px;
                        }
                        li {
                          width: 98%;
                        }
                        .tabs {
                          display: none;
                        }
                        .tabs > li {
                          display: none;
                        }
                        .tabs-content {
                          padding: 0;
                          list-style-type: none;
                        }
                        tr {
                          display: flex;
                          flex-direction: column;
                        }
               </style>`

      

        
        
        
      

    

Finally, here's the WebView:

<WebView
  javaScriptEnabled={true}
  onNavigationStateChange={this.onNavigationStateChange.bind(this)}
  scrollEnabled={false}
  source={{html: rawHTML}}
  style={{height: Number(this.state.height)}}
  domStorageEnabled={true}
  scalesPageToFit={true}
  decelerationRate="normal"
  javaScriptEnabledAndroid={true} />

      

        
        
        
      

    

Also, as I said before, all other styles applied work, basically it's just font size which is super unpredictable.

Here is the view when I click it once:

And then I don't change or exit the application, I just go back and then press the same button to enter the same screen and sometimes I get this (sometimes it takes a few clicks ... it's very unpredictable):

I have a video of this in case you feel it helps. I am trying to retell this as best I can.

Edit:

I think this might be a simulator only problem? If anyone could say some kind of wisdom in this, it would still be amazing. I am unable to reproduce this error while building the assembly.