none
getClientRects() method doesn't work with absolute positioned elements in IE 11

    Question

  • I'm currently experiencing an issue with text selection in IE 11 and EDGE browsers.

    My goal is to get text selection working where it returns to me the getClientRects.

    What I have is a simple setup:

    divs with absolute positions and simple JS code: 

      

    document.addEventListener('mouseup', function(e) {
      let selection = window.getSelection();
      let range = selection.getRangeAt(0);
      let rects = range.getClientRects();

      //check console for result.
      console.log('this is the rects', rects);
    });

    You can check it in action here: 

    http://jsfiddle.net/p4Lu4/10/ 

    (Try to select more than 1 line of text and check the console)

    I am expecting that

    range.getClientRects().length()

    to be > 0, but in fact it is almost always equals to 0

    How can I reach this without changing UI layout and styles ?

    IMPORTANT:

    can't change UI styles and my elements should stay absolute

    Thanks

    Wednesday, December 06, 2017 4:51 PM

All replies

  • Hi,

    you should send feedback to the Edge developers at https://developer.microsoft.com/en-us/microsoft-edge/support/ .

    see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/?page=1&q=range

    Other browsers support multiple range selection (see MDN. https://developer.mozilla.org/en-US/docs/Web/API/Selection/rangeCount ). This is useful for tts screen reader applications to break large documents into manageable blocks (headings, paragraphs, sentences).

    have you tried holding the cltl key while you are dragging the selection across the absolutely positioned <p> elements? The Shift key is also used by browsers to concat ranges.

    Your use case in your jsfiddle (absolutely positioned <p> elements) is not a common design pattern...

    things are more likely to get fixed by MS if:

    they do not meet a published or ratified standard

    or

    they use design patterns that are in common use on high volume websites.

    or

    they are a security exploit

    Regards.


    Rob^_^



    • Edited by IECustomizer Thursday, December 07, 2017 1:16 AM
    Thursday, December 07, 2017 1:10 AM
  • Hello Rob

    Thanks for your answer. 

    I have tried to use approach  for screen readers, which you sent me. Unfortunately it didn't help me. 

    Also I have tested different ways of selection, like ctrl button, shift button and other. Nothing works for me.

    As I have already mentioned I can't change UI styles in my case. 

    ok I will create this question in Edge dev community.

    So can you confirm that IE 11 doesn't support getClientRects method for absolute positioned elements, such as I sent to you in my jsfiddle example? 

    Regards

    Thursday, December 07, 2017 8:56 AM
  • Hi,

    When you submit a bug report to the MS Edge Portal, other users and testers can confirm your test case, MS will triage your issue and allocate resources to investigate and correct the issue or mark it as 'won't fix'. There are already a number of issue tickets pending for selection and range. Me personally, I have no use case that is impacted, it is not a show stopper for any projects that I am currently working on.

    Regards.


    Rob^_^

    Thursday, December 07, 2017 6:37 PM
  • Hi, 

    Thanks for your reply

    But I can't access the MS Edge Portal with my work account and even with my personal one. 

    I am receiving this message: 

    Sorry, your account type is not supported

    AAD (Azure Active Directory) accounts are not supported at this time. You need to use a regular Microsoft account like the one you can create here.

    Do you have an idea what I am doing wrong? And how can I access it?


    Friday, December 08, 2017 11:36 AM