WKWebView: текст отображается с неправильным размером для определенных диапазонов размеров, когда несколько элементов используют этот размер в одном документе - PullRequest
Новая
       58

WKWebView: текст отображается с неправильным размером для определенных диапазонов размеров, когда несколько элементов используют этот размер в одном документе

0 голосов
/ 01 января 2019

Я знаю, это звучит совершенно помешано.Пожалуйста, посмотрите на следующие снимки экрана:

Screenshot 1

Screenshot 2

Эти два снимка экранаWKWebView рендеринг точно того же файла. Единственное отличие состоит в том, что во втором я продублировал восемь делений, которые вы видите в первом (полный HTML ниже).

Простодля ясности, второй скриншот имеет две проблемы:

  1. Между размерами 22px и 28px текст все необъяснимо отображается с тем же размером и
  2. .фактические размеры для текста между 16px и 26px отличаются от первого снимка экрана , а также неверны.Проблема, кажется, уходит на отметке 30px.(Что бы это ни стоило, я попробовал это, используя pt единиц, и результаты были похожи.)

Это полный мой 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>

Чтобы было ясно, эта проблема будет воспроизведена всего за две строки.Простое использование одного и того же размера шрифта в «диапазоне проблем» дважды приводит к воспроизведению проблемы.Другими словами: 

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

... является репро, но вы можете не заметить, если не ожидаете, что текст будет определенного размера.

И это код, который добавляетWKWebView и загружает контент (из 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];

Несколько вещей, которые я смог определить:

  • Проблема исчезнет, ​​еслиЯ удаляю тег точки обзора, или, в частности, если удаляю что-либо, связанное с масштабом, из атрибута content.
  • Проблема возникает только в альбомном режиме, а не в портретном.
  • Проблема идетнет, если браузер не настроен на заполнение родительского элемента (я пробовал использовать как translatesAutoresizingMaskIntoConstraints, так и вручную, добавив ограничения AutoLayout - это то же самое).

Я вконец остроумия здесь.Пожалуйста, помогите!

1 Ответ

0 голосов
/ 07 января 2019

Кажется, что виновником здесь был text-size-adjust (большое спасибо @mattsven за помощь здесь).

Возможно, вы захотите использовать и text-size-adjust, и-webkit-text-size-adjust.

для конкретного поставщика. Если кому-то это поможет, когда я добавлю это на уровне body, это не будет одинаково применяться к моему документу, хотя я думаю, что это может осложнитьсяzoom:0.5 У меня на уровне body (длинная история).Однако, несмотря на это, я обнаружил, что, если бы я применил его специально к классам, в которых возникали странные проблемы с рендерингом, которые я описал в своем первоначальном вопросе, я смог исправить эту проблему.

Надеюсь, это кому-нибудь поможет!

...