Array.sort works differently in Chrome and Firefox

Question

This question has been asked various times, but in most of the questions the person asking is doing something wrong.

Examples:

Array.sort working differently in chrome and firefox and IE

JavaScript. Array .sort() method returns different results for Chrome and Firefox if array contains duplicate numbers

Array.sort() behaves differently in Firefox and Chrome/Edge

Hopefully in my case, I'm doing something wrong as well. But the evidence against the browsers is pretty damning!

When you view the table in my website, it is sorted in opposite orders on Firefox and Chrome.

Here is my code:

function sortByKey(a, b) {
    console.log(`b: ${b.id} - a: ${a.id}`);
    return b[SORTING_KEY] - a[SORTING_KEY];
}

export function sortObjectValues(mappedObject) {
    console.log('BEGIN SORTING');
    return Object.values(mappedObject)
        .sort(sortByKey);
}

Here is the log output in Chrome:

BEGIN SORTING
b: 7920 - a: 7924
b: 7924 - a: 7931
b: 7920 - a: 7931
b: 7924 - a: 7931
b: 7931 - a: 7942
b: 7920 - a: 7942
b: 7942 - a: 7945
b: 7931 - a: 7945
b: 7924 - a: 7945
b: 7931 - a: 7952
b: 7945 - a: 7952
b: 7924 - a: 7952
b: 7931 - a: 7953
b: 7920 - a: 7953
b: 7942 - a: 7953
b: 7931 - a: 7959
b: 7924 - a: 7959
b: 7945 - a: 7959
b: 7931 - a: 9185
b: 7959 - a: 9185
b: 7924 - a: 9185
b: 7952 - a: 9185
b: 7945 - a: 9189
b: 7924 - a: 9189
b: 7952 - a: 9189
b: 9185 - a: 9189

And here is the output in Firefox:

BEGIN SORTING
b: 7924 - a: 7920
b: 7931 - a: 7920
b: 7931 - a: 7924
b: 7942 - a: 7920
b: 7942 - a: 7931
b: 7945 - a: 7920
b: 7945 - a: 7942
b: 7945 - a: 7931
b: 7945 - a: 7924
b: 7952 - a: 7920
b: 7952 - a: 7942
b: 7952 - a: 7931
b: 7952 - a: 7945
b: 7952 - a: 7924
b: 7953 - a: 7920
b: 7953 - a: 7942
b: 7953 - a: 7931
b: 7959 - a: 7920
b: 7959 - a: 7942
b: 7959 - a: 7953
b: 7959 - a: 7931
b: 7959 - a: 7945
b: 7959 - a: 7924
b: 9185 - a: 7920
b: 9185 - a: 7942
b: 9185 - a: 7953
b: 9185 - a: 7931
b: 9185 - a: 7945
b: 9185 - a: 7959
b: 9185 - a: 7924
b: 9185 - a: 7952
b: 9189 - a: 7920
b: 9189 - a: 7942
b: 9189 - a: 7953
b: 9189 - a: 7931
b: 9189 - a: 7945
b: 9189 - a: 7959
b: 9189 - a: 7924
b: 9189 - a: 7952
b: 9189 - a: 9185

To me, it seems like the order of the arguments has been reversed in Firefox. What is going on here??

Chrome userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36

Firefox userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:86.0) Gecko/20100101 Firefox/86.0

When logging SORTING_KEY along with id, I get:

Chrome

BEGIN SORTING
b: SORTING_KEY=0 id=7920 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=0 id=7920 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=0 id=7920 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=1 id=7942 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=7 id=7952
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=7 id=7952
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=7 id=7952
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=0 id=7920 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=1 id=7942 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=5 id=7959
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=5 id=7959
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=5 id=7959
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=9 id=9185
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=9 id=9185
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=9 id=9185
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=9 id=9185
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=8 id=9189
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=8 id=9189
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=8 id=9189
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=8 id=9189

Firefox

BEGIN SORTING
b: SORTING_KEY=6 id=7924 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=3 id=7931 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=1 id=7942 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=1 id=7942 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=4 id=7945 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=7 id=7952 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=2 id=7953 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=2 id=7953 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=2 id=7953 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=5 id=7959 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=5 id=7959
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=9 id=9185 - a: SORTING_KEY=7 id=7952
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=0 id=7920
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=1 id=7942
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=2 id=7953
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=3 id=7931
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=4 id=7945
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=5 id=7959
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=6 id=7924
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=7 id=7952
b: SORTING_KEY=8 id=9189 - a: SORTING_KEY=9 id=9185

Map of id to SORTING_KEY is identical between the two browsers:

You should search what is the algo of firefox sort and google sort — mehdim2, Mar 04 '21 at 20:32
Both give you the same result no? The sorting algorithm isn't standardized by the spec. — MinusFour, Mar 04 '21 at 20:33
@mehdim2 it's not the algorithm- looks to me like the arguments are being applied in different orders?? — TVG, Mar 04 '21 at 20:33
Sorry, should have specified, the outcome in my browser is that table rows are sorted in reverse order on Firefox (compared to what renders in Chrome) — TVG, Mar 04 '21 at 20:35
@MinusFour actually, to debug, I added a column to the table that displays the value of SORTING_KEY for each row. The values are the same for each object in Chrome and Firefox. The sorting order just comes out reversed. — TVG, Mar 04 '21 at 20:38
Could you print `b[SORTING_KEY]` and `a[SORTING_KEY]` instead of `b.id` and `a.id`? — MinusFour, Mar 04 '21 at 20:39
@MinusFour Good idea. Added logs with `id` and `SORTING_KEY` for more clarity — TVG, Mar 04 '21 at 20:56
UPDATE: the issue with sorting the tables actually had to do with the Table component using `Array.sort` internally with no arguments. Stupid. — TVG, Mar 04 '21 at 21:26

Array.sort works differently in Chrome and Firefox

0 Answers0