Triple click text in Chrome contains the following node in range

Im seeing different range behaviour when I drag select a node vs. when I triple click select a node.

When I drag select, both the start and end containers contain the text that I highlighted. This is the desired outcome.

When I triple click a node in Chrome, Im seeing the end container is the following node, not the text node that I see highlighted.

What I would expect is the range to contain only the text node that is selected on the triple click.

Here is a reproducible example

js

document.addEventListener('click', e=>{
    var r = document.getSelection().getRangeAt(0);
  var start = r.startContainer.nodeType===3?r.startContainer:r.startContainer.childNodes[r.startOffset];
  var end = r.endContainer.nodeType===3?r.endContainer:r.endContainer.childNodes[r.endOffset];
  console.log(e.detail, start, end);
})

html

<p>
Triple click the h2 and you'll see the following p tag content in the console. 
</p>
<p>
Drag select the h2 tag, and the p tag content will not be present in the console.
</p>

<div>

  <h2>I'm a h2</h2> 
  <p>Why do you see me in the console?</p>
  
</div>

http://jsfiddle.net/kz0u85q6/

Ive tried this, but it doesnt seem to be the same.

Edit: This is what the range looks like when I triple click the H2 element text

from Triple click text in Chrome contains the following node in range