range getClientRects(), getBoundingClientRect() wrong when empty anchor is in HTML paragraph

Question

I found a possibly weird behaviour of getClientRects() [getBoundingClientRect()]:

Look at this HTML code:

<p>Text here... word1<a id='id' class='class'/>word2 Other multiline Text here...</p>

[Note that the a element has no text inside, I tested just this kind of code, don't know if other arrangements give the same 'bug'.]

Let's say that when user selects a range in the p 'estate' that has the anchor inside, like "word1 word2", a JS function stores start/end elements and offsets. Next time another function creates a range with those bounds. But if getClientRects() is called on that range it yields many rects other than the two expected: first and last rects of the array indeed are the expected ones, but, between them, there are many rects that in fact cover the entire p element. [range.getBoundingClientRect() is affected too.] How to avoid this?

some browsers will consider the `` tag as an open one and close it for you over the rest of the `
` element. change it to ``. — Gil, Mar 24 '14 at 12:02
With some others as well, but I've never had to check this thoroughly for other elements, and it also depends on the browser's type/version. Anyway, adding a closing tag won't overcrowd your code and will assure a compatibility with all browsers. — Gil, Mar 24 '14 at 13:28
What is the reason for the `` element? Are you confusing the anchor of the user selection (i.e. the starting point for the selection) with the `` (aka "anchor") element? — Tim Down, Mar 24 '14 at 15:16

range getClientRects(), getBoundingClientRect() wrong when empty anchor is in HTML paragraph

0 Answers0