Using setSelectionRange with blur - Differences in Chrome and Safari

I am trying to fix a code that has an event listener for onblur which does a setSelectionRange. I noticed that when using this on Chrome, the on blur event moves the cursor to the next tab index. On safari however the cursor remains on that same element and the cursor moves to the position that is specified in the setSelectionRange.

Questions:

1. Should I even be using setSelectionRange when doing the blur event?
2. Is there any way to use the setSelectionRange consistently on both browsers I.e. can I make Safari work the same way as Chrome?

Here is a hello world code that shows how the cursor behaves differently when I tab out of a field in Safari vs Chrome:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>
    function handleBlur() {
      event.target.setSelectionRange(1,1)
    };
  </script>
</head>
<body>
  <input value="First Name" onblur="handleBlur()">
  <input value="Last Name" onblur="handleBlur()">
</body>
</html>