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?
For seeing issue at first hand look for example here: https://muqattacounter.github.io/#sura=4&verse=87&count=ا+ل
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.
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!
<rdar://problem/93422301>
This issue is not about rendering JavaScript wrongly, it is about rendering display property of CSS wrongly...
The issue is specifically about webkit/safari interpretation of display:inline; property of CSS
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!