Bug 255283 - woff font cause render black boxes or content missing
Summary: woff font cause render black boxes or content missing
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 16
Hardware: iPhone / iPad iOS 16
: P1 Blocker
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-11 07:08 PDT by alex_pan
Modified: 2023-04-18 07:09 PDT (History)
3 users (show)

See Also:


Attachments
webpage resources and bug pictures (12.35 MB, application/x-zip-compressed)
2023-04-11 07:08 PDT, alex_pan
no flags Details
pictures (2.19 MB, image/jpeg)
2023-04-11 07:48 PDT, alex_pan
no flags Details
webpage to reproduce bug (10.41 MB, application/x-zip-compressed)
2023-04-11 20:51 PDT, alex_pan
no flags Details
blackScreen (611.79 KB, image/png)
2023-04-11 20:52 PDT, alex_pan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description alex_pan 2023-04-11 07:08:44 PDT
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.
Comment 1 alex_pan 2023-04-11 07:48:19 PDT
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
Comment 2 alex_pan 2023-04-11 07:55:22 PDT
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
Comment 3 Alexey Proskuryakov 2023-04-11 09:17:03 PDT
Thank you for the report! Would it be possible to provide a way to reproduce this?
Comment 4 alex_pan 2023-04-11 18:38:02 PDT
(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.
Comment 5 Myles C. Maxfield 2023-04-11 18:43:44 PDT
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?
Comment 6 alex_pan 2023-04-11 19:04:54 PDT
(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.
Comment 7 alex_pan 2023-04-11 20:51:24 PDT
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.
Comment 8 alex_pan 2023-04-11 20:52:29 PDT
Created attachment 465856 [details]
blackScreen

black boxes can be large or small, this is one.
Comment 9 alex_pan 2023-04-11 20:57:52 PDT
and also, after refresh page and load font several times , webpage crash and reload easily.
Comment 10 alex_pan 2023-04-11 21:21:30 PDT
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).
Comment 11 Radar WebKit Bug Importer 2023-04-18 07:09:24 PDT
<rdar://problem/108198743>