WKWebView: Text rendered at wrong size for certain size ranges when multiple elements use that size in the same document

I know this sounds totally bonkers. Please a look at the following screenshots:

These two screenshots are of a WKWebView rendering exactly the same file. The only difference is that in the second one, I have duplicated the eight divs you see in the first one (full HTML below).

Just for clarity, the second screenshot has two problems:

Between sizes 22px and 28px, the text is all inexplicably rendered at the same size, and
The actual sizes for text between 16px and 26px are different from in the first screenshot, as well as incorrect. The problem seems to go away at the 30px mark. (For what it's worth, I tried this using pt units too and the results were similar.)

This is the entirety of my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>Repro</title>
</head>
<body>
     <div style="font-size:16px;">The quick fox jumps (16).</div>
     <div style="font-size:18px;">The quick fox jumps (18).</div>
     <div style="font-size:20px;">The quick fox jumps (20).</div>
     <div style="font-size:22px;">The quick fox jumps (22).</div>
     <div style="font-size:24px;">The quick fox jumps (24).</div>
     <div style="font-size:26px;">The quick fox jumps (26).</div>
     <div style="font-size:28px;">The quick fox jumps (28).</div>
     <div style="font-size:30px;">The quick fox jumps (30).</div>

     <div style="font-size:16px;">The quick fox jumps (16).</div>
     <div style="font-size:18px;">The quick fox jumps (18).</div>
     <div style="font-size:20px;">The quick fox jumps (20).</div>
     <div style="font-size:22px;">The quick fox jumps (22).</div>
     <div style="font-size:24px;">The quick fox jumps (24).</div>
     <div style="font-size:26px;">The quick fox jumps (26).</div>
     <div style="font-size:28px;">The quick fox jumps (28).</div>
     <div style="font-size:30px;">The quick fox jumps (30).</div>
</body>
</html>

To be clear, this problem will repro with as few as two lines. Simply using the same font size within the "problem range" twice causes the problem to repro. In other words:

<div style="font-size:22px;">The quick fox jumps (22).</div>
<div style="font-size:22px;">The quick fox jumps (22).</div>

...is a repro, though you might not notice unless you expect the text to be a certain size.

And this is the code that adds the WKWebView and loads the content (from within viewDidLoad):

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.pnlContent.frame configuration:configuration];

webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
webView.translatesAutoresizingMaskIntoConstraints = true;

[self.pnlContent addSubview:webView];

NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
[webView loadFileURL:url allowingReadAccessToURL:url];

A few things I've been able to determine:

The problem goes away if I remove the viewpoint tag, or specifically, if I remove anything related to the scale from the content attribute.
The problem only occurs in landscape mode, not portrait.
The problem goes away if the browser is not made to fill its parent (I've tried it both using translatesAutoresizingMaskIntoConstraints as well as by manually adding AutoLayout constraints -- it's the same.)

I'm at wits' end here. Please help!

Solution

It seems that the culprit here was text-size-adjust (big thanks to @mattsven for the assist here).

You'll probably want to use both text-size-adjust and the vendor-specific -webkit-text-size-adjust.

In case it helps anyone, when I added this at the body level, it did not seem to be uniformly applied to my document, though I think it might be complicated by a zoom:0.5 I have at the body level (long story). However, for what it's worth, I found that if I applied it specifically to the classes that were experiencing the weird render issues I described in my original question, I was able to correct the issue.

Hope this help someone!