Bug 240277 – Highlighting Sliding Issue With Arabic in Safari

• Component: CSS
• Status: NEW

[Abdurrahman Ayyıldız]

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?

[Abdurrahman Ayyıldız]

For seeing issue at first hand look for example here: https://muqattacounter.github.io/#sura=4&verse=87&count=ا+ل

[Alexey Proskuryakov]

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.

[Abdurrahman Ayyıldız]

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!

[Radar WebKit Bug Importer]

<rdar://problem/93422301>

[Abdurrahman Ayyıldız]

This issue is not about rendering JavaScript wrongly, it is about rendering display property of CSS wrongly...

[Abdurrahman Ayyıldız]

The issue is specifically about webkit/safari interpretation of display:inline; property of CSS

[Abdurrahman Ayyıldız]

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!