Bug 240277

Summary: Highlighting Sliding Issue With Arabic in Safari
Product: WebKit Reporter: Abdurrahman Ayyıldız <ayyildizabdurrahman>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Critical CC: ayyildizabdurrahman, megan_gardner, mmaxfield, rniwa, webkit-bug-importer, wenson_hsieh
Priority: P1 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   
URL: https://muqattacounter.github.io/#sura=4&verse=87&count=ا+ل
Attachments:
Description Flags
Safari has renders JavaScript differently so that unified letter لا which consists from two letters ل+ا highlighted twice in ل at true position ا at next character's position(false) none

Description Abdurrahman Ayyıldız 2022-05-10 07:17:07 PDT 
Created attachment 459117 [details]
Safari has renders JavaScript differently so that unified letter لا which consists from two letters ل+ا highlighted twice in ل at true position ا  at next character's position(false)

Selam, thanks to this extension( https://github.com/lonekorean/highlight-within-textarea ) it was really helpful for my project: https://muqattacounter.github.io but I have issues with Safari...

It has renders JavaScript differently so that unified letter لا (LamElif) which consists from two letters ل+ا (Lam + Elif) highlighted twice in ل at true position and ا at next character's position(false):

https://i.stack.imgur.com/x44TN.png

Because of this sliding issue all the next highlights becomes increasingly more false(more slided) as new لا unified letters comes in at next characters... And end result is this:

https://i.stack.imgur.com/itwMD.jpg

Firefox can separately highlight this two letters from middle(**which is desired**):

https://i.stack.imgur.com/4OFIZ.png

Can you render js files like Firefox about this issue?
Comment 1 Abdurrahman Ayyıldız 2022-05-10 07:36:10 PDT 
For seeing issue at first hand look for example here: https://muqattacounter.github.io/#sura=4&verse=87&count=ا+ل
Comment 2 Alexey Proskuryakov 2022-05-10 09:21:28 PDT 
I can select half of the character interactively, so WebKit has the correct text iterator for the selection. The extension must be using some JS API whose behavior is different.
Comment 3 Abdurrahman Ayyıldız 2022-05-10 09:50:56 PDT 
It uses JQuery but it has nothing to do about JQuery or code whatever it uses..

Because it is the same code for all browsers and all(chrome/firefox/safari) 3 of them gives different results in this link:

https://muqattacounter.github.io/#sura=4&verse=87&count=ا+ل

Best result is firefox's and then chrome's and worse is safari's... that's it!
Comment 4 Radar WebKit Bug Importer 2022-05-17 07:18:13 PDT 
<rdar://problem/93422301>
Comment 5 Abdurrahman Ayyıldız 2022-05-19 07:49:45 PDT 
This issue is not about rendering JavaScript wrongly, it is about rendering display property of CSS wrongly...
Comment 6 Abdurrahman Ayyıldız 2022-06-23 16:14:33 PDT 
The issue is specifically about webkit/safari interpretation of display:inline; property of CSS
Comment 7 Abdurrahman Ayyıldız 2022-06-26 15:07:54 PDT 
Issue comparison for major browsers: https://muqattacounter.github.io/pic/browsers.png

Other browsers than firefox renders "display: inline" property of CSS wrong so letter "ﻻ" higlighted wrong by other browsers!