Bug 234193 - Page doesn't draw content if a <style> tag with a Google Fonts @import rule is removed during the DOMContentLoaded event
Summary: Page doesn't draw content if a <style> tag with a Google Fonts @import rule i...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-12-10 21:40 PST by Neil Jhaveri
Modified: 2022-02-12 18:58 PST (History)
4 users (show)

See Also:

Simplified test case (620 bytes, text/html)
2021-12-10 21:40 PST, Neil Jhaveri
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Neil Jhaveri 2021-12-10 21:40:44 PST
Created attachment 446861 [details]
Simplified test case

Page doesn't draw content if a <style> tag with a font @import is removed during the DOMContentLoaded event

- Open the attached test.html file in Safari

- Expect to see lines of text in sans-serif font
- Actual: Text isn't painted at all

- It takes a few seconds, but the page is scrollable
- Text can be selected and copied, even though it's not painted

Safari 15.1 (17612.
macOS 12.0.1 (21A559)
MacBookPro18,1 (16" M1 Pro)
Comment 1 Alexey Proskuryakov 2021-12-13 10:20:21 PST
Confirmed that this reproduces in Safari, does not reproduce in Chrome.

This is clearly a bug, and seems to have the workaround of "just don't do this". Could you please clarify if it's important in some way?
Comment 2 Neil Jhaveri 2021-12-13 10:57:05 PST
Sure, happy to give context. In an email client, when replying to certain messages (e.g. with Google fonts imports), the compose window's web view was drawing blank (this bug).

When replying to or forwarding a message, the client takes the original message's text/html part, inserts it into a `<blockquote>`, and loads this into a `WKWebView`. During load, there is logic to inline styles resulting from `<style>` and `<link>` elements in the quoted text, and remove them from the DOM, so they don't impact the style of newly-typed text above the quote block. This is done as early as possible (e.g. during `DOMContentLoaded`) to avoid visual flicker.

For now, I have deferred the removal of `<style>` elements with @imports until the `load` event fires, which works around this issue. However, it has the trade-off of seeing some possible "flicker" on screen because `<style>` element removal has been deferred. I haven't fully investigated if there are any other good approaches to solving this general style-inlining problem.
Comment 3 Radar WebKit Bug Importer 2021-12-17 21:41:18 PST
Comment 4 Brent Fulgham 2022-02-12 18:58:24 PST
This should now be fixed in STP 139, iOS 15.4 Beta, and macOS 12.3 Beta.