Safari Browser Setup JS Bug

[akcorp2003]

The area to add test cases for JS is not working and returning "IndexSizeError: The index is not in the allowed range" coming from getRangeAt in codejar.js:171.

This is on Safari v14.0 (15610.1.28.1.9, 15610).

However, the text box works for Setup JS.

[psiho]

Textbox is a fallback option, but far from optimal. I haven't tested Safari at all. It's really hard for me to get my hands on a Mac. But it seems I'll have to try as this is a serious issue for Safari users.

[psiho]

Well, I managed to reproduce the problem on Midori browser on Linux which is also a WebKit browser like Safari. So I have something to work on.

[terrymorse58]

Bug confirmed in Safari Technology Preview, Release 120 (Safari 14.2).

The test case code sections are not selectable. I noticed the following styling:

-webkit-user-select: none;

Changing that to:

-webkit-user-select: text;

made the text in the code section selectable, and the select cursor appeared where the text was clicked. Typing still didn't work.

[psiho]

Np. As mentioned earlier, it's finally easy for me to reproduce it on Linux. v1.1 update will start soon and this is high on the list https://github.com/psiho/jsbench-me/projects/2

[psiho]

Yes, -webkit-user-select: text; was a solution. Not sure why it wasn't working for you. However, I did change it on more than one place.

Cause of this was latest drag&drop code for reordering suite cases. Somehow, draggable textboxes are useless on webkit browsers without this addition in css.

Since I tested this on Midori/Linux (as I don't have Apple stuff), here is a development location test url for any Apple users to check: https://dev--jsbenchme-v1.netlify.app/

[terrymorse58]

I confirm that on the development site, the code boxes are selectable and editable on Safari (Mac OS).

• terry morse @.***

On 2021-04-27, at 12:48, Mirko Vukušić @.***> wrote:

Yes, -webkit-user-select: text; was a solution. Not sure why it wasn't working for you. However, I did change it on more than one place.

Cause of this was latest drag&drop code for reordering suite cases. Somehow, draggable textboxes are useless on webkit browsers without this addition in css.

Since I tested this on Midori/Linux (as I don't have Apple stuff), here is a development location test url for any Apple users to check: https://dev--jsbenchme-v1.netlify.app/ https://dev--jsbenchme-v1.netlify.app/ — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/psiho/jsbench-me/issues/35#issuecomment-827881736, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKA7RU27R6JX3I7YMLKAZR3TK4IKDANCNFSM4SJDOR2Q.

[akcorp2003]

I also can confirm that the text areas are selectable and editable on Safari. This is very exciting!

Minor note: I see the syntax highlighting doesn't work as I type but if I copied and pasted code, the highlighting comes back.

[psiho]

@akcorp2003 thx for noticing this. CodeJar update from 3.0.0 to 3.4.0. caused this new issue. Since this is a minor update, I rolled back for now and will update later. Change is not published on dev yet but will be fixed on release.

I'm closing this now.