Bug 255283 – woff font cause render black boxes or content missing

• Status: NEW
• Component: Text

[alex_pan]

Created attachment 465845 [details]
webpage resources and bug pictures

when apply a woff font to webpage：
1.it will sometimes cause black boxes on IOS 16.1.
2.it will cause content missing on IOS 16.5.
broswer: only iso safari/chrome/broser in wechat/webview in wechat, Android works fine.

there are bug pictures in the attachment zip: the left phone is ios 16.5, the content after last haft screen is missing. the right phone is ios 16.1.
the webpage is also in zip file.

[alex_pan]

Created attachment 465846 [details]
pictures

the left one missing conntent, after the first screen is all white.
the right one get black background, but hard to reappear

[alex_pan]

an that happen after the font apply to content. I use FontFace API to load the woff. On the production envirenment, IOS 16.5 even will stuck after missing content, if i refresh the page, render will not change, still stuck, but i can find the page reload from the dev console on mac safari. and when i hover on a element on console tab, it show trapezoid highlight on phone which should be rectangle

[Alexey Proskuryakov]

Thank you for the report! Would it be possible to provide a way to reproduce this?

[alex_pan]

(In reply to Alexey Proskuryakov from comment #3)
> Thank you for the report! Would it be possible to provide a way to reproduce
> this?

Thanks for your response! yes, you can doanload the attacnment(zip), there has a testFont floder inside, use some tools like charles proxy to this floder and request the index.html on phone, you will get the webpage.

[Myles C. Maxfield]

The HTML document in the .zip file is quite large. Which part of it should I be looking at, to see the black boxes? Where are the black boxes in the "pictures.jpg" attachment?

[alex_pan]

(In reply to Myles C. Maxfield from comment #5)
> The HTML document in the .zip file is quite large. Which part of it should I
> be looking at, to see the black boxes? Where are the black boxes in the
> "pictures.jpg" attachment?

black happen on IOS 16.1，open the html(use a server proxy, you should request the css\woff together), sometimes will reproduce the black background problem(page bg become black and color of char change) or some black boxes over the content, but not every time. and these will not happen on ios 15 or android.

Let me see is there some way to reproduce the problem easily later.

[alex_pan]

Created attachment 465855 [details]
webpage to reproduce bug

I update the webpage, add two btn to load and switch font.You can click load btn to load and appy font, or click swich btn to switch font apply after font loaded.  

in iphone 12 mini ios 16.5, content loose right after load button clicked.In Iphone 12 ios 16.1, click load button and scroll page, sometimes you will see some black in page.

[alex_pan]

Created attachment 465856 [details]
blackScreen

black boxes can be large or small, this is one.

[alex_pan]

and also, after refresh page and load font several times , webpage crash and reload easily.

[alex_pan]

in ios 16.5/16.4, when content missing ,the page can scroll, but refresh the page will not trigger render update, the content still stuck, but page reloaded in fact. Continuously rotate phone after font loaded and apply alose reproduce stuck bug or black boxes bug(but rare).

[Radar WebKit Bug Importer]

<rdar://problem/108198743>