Bug 232370

Summary: canvas fillText draws wrong characters
Product: WebKit Reporter: Arthur <virtualtuur>
Component: WebGLAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ap, dino, kbr, kkinnunen, mail, mmaxfield, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Intel)   
OS: macOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=232559
Description Flags
screenshot2 none

Description Arthur 2021-10-27 03:13:52 PDT
Created attachment 442575 [details]


i get the weirdest text in safari on osx.
On iOS it all seems fine, also other browsers seem fine.

Here is the link to compare to my screenshot.

osx: 11.6 (20G165)
MacBook Pro (Retina, 15-inch, Mid 2015)
2,5 GHz Quad-Core Intel Core i7
16 GB 1600 MHz DDR3
AMD Radeon R9 M370X 2 GB
Intel Iris Pro 1536 MB

safari 15.0 (16612., 16612)

Seems a bug to me.
Kind regards,
Comment 1 Alexey Proskuryakov 2021-10-30 15:54:59 PDT
Thank you for the report!

Is this new in Safari 15, or was this happening before?
Comment 2 Arthur 2021-10-31 01:31:03 PDT

I have not seen this before.
I also only see it with this example, i think. Also the/my off-line copy shows this.
Some additional info that could make sense... although it is far from my expertise.
I use 'clean my mac'.
Adobe dreamweaver crashes when i open a html or css file.
I recently have used a terminal 'call' to open local files in chrome.
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files 

I expect the above not to be relevant, although it is system wise the most exotic i did.. haha.

I was thinking about updating to Monterey OS, but i canceled that for now because of this and have seen some warnings for usb ports malfunctioning.

Virtual Regards,
Comment 3 Arthur 2021-10-31 02:18:00 PDT

i just see it happening again in a different example we are building.
It seems not being isolated to that one example.
Comment 4 Kimmo Kinnunen 2021-11-01 01:56:52 PDT
Thanks for the report.
Cannot reproduce initially with Monterey, will test on Big Sur.

More likely a Canvas Context2D bug with GPU process, fillText or something similar.

Arthur: If you have a reproduction that is simpler, without minification and without obfuscation, that would be most helpful.
Comment 5 Arthur 2021-11-01 04:43:18 PDT

i use the Krpano viewer. https://krpano.com/home/
I will ask Klaus, the owner, if he can open some up, but i doubt it.
The core 'krpano.js' is not in my possession as opensource.
I will ask him now, but perhaps it is better if you contact him directly: 
mail@krpano.com  feel free to mention my name in this case.

I also only find the issue on my own MacBook Pro, and only recently.
I check on macs with some neighbours but there all seems to be fine.
I am not sure if this issue, on my system, was introduced with updating to Big Sur.
Comment 6 Arthur 2021-11-01 07:01:42 PDT
.. as i understand from 'Klaus' there is 'nothing' between the text and the output in the browser.
I was wondering if any other software could have made this happen, or wrong use/typo in 'terminal', or that 'clean my mac' is cleaning too much..(?)
Comment 7 Klaus Reinfeld 2021-11-01 09:19:07 PDT

here is Klaus from krpano.

In that example these texts will be drawn using canvas + filltext and then that canvas be used as webgl texture, nothing really special.

Providing the example without minification and without obfuscation is unfortunately not possible and might be also not really helpful as it would be a lot of lower-level engine code. But the code/API-calls should be not the problem.

I wasn't able to reproduce that either, the example was tested on a lot of different systems, but nowhere with such problem. That seems to be somehow specific to Arthurs system...

When looking at the screenshot it seems like the wrong characters are used, but that equal for all texts - see the 'Image' texts and the 'e' and 'b' in the 'Web' and 'Youtube' texts.

If necessary I could make a special build where all filltext calls will get logged to console.

Best regards,
Comment 8 Kimmo Kinnunen 2021-11-01 10:40:04 PDT
Thanks for the investigations.
Arthur, maybe you could still post if your locale or language is somehow custom. E.g. what settings do you have in "Settings -> Language & Region"
Comment 9 Arthur 2021-11-01 10:55:32 PDT
Created attachment 442994 [details]
Comment 10 Arthur 2021-11-01 10:59:31 PDT

Region --> Netherlands
Preferred language English -- 2nd Dutch/Nederlands

I added new screenshot.

This is one text 'string'.
It seems the <h2> and</h2> make the problem, where ever i put it in the text.
When i take out that line it is fine. I also tried with [] instead of <> makes no difference.

<data name="htmltext"><![CDATA[
	With Panimator you can easily create nice transitions by passing the textured model:<br>
	  <li>Load dollhouse scene.</li>
	  <li>Start a camera animation to next panorama position.</li>
	  <li>Load new panorama scene.</li>
Comment 11 Radar WebKit Bug Importer 2021-11-03 03:14:17 PDT
Comment 12 Arthur 2021-11-11 03:44:50 PST

in my second screenshot i have said that the <h2> things was making the issue, but it seems in the example of screenshot 1 something like <h2> is not used at all.
There the font-weight:bold; is used..
Perhaps there is an issue?

i think about updating to Monterey.
The problem is still there.
Perhaps the update fixes it.

If perhaps one of the people of Apple wants to have a look in my system, if they didn't already .-) feel free to contact me on virtualtuur@gmail.com to let me know.

Somewhere next week i'll plan to update then.
I find more issues between browsers on a regular base.
Would be great when 'base protocol' is the same for all browsers.
'Wishfull thinking'..

Comment 13 Arthur 2021-11-23 02:11:30 PST

i updated to Monterey and all seems to be fine now.