locked
Bug in getStartPositionOfChar() method

    Question

  • When I call elem.getStartPositionOfChar(0) on an element with a single empty space as text content, (" "), I get a "JavaScript runtime error: IndexSizeError". The textContent is recognized as having a length of 1, and when I call elem.textContent.charAt(0), it returns properly with " ". The method seems to work fine if there is a character before the space, (ex textContent = "t ", the position after the space is returned.) However, if I place two spaces in a row, (ex string = "t  ", error is thrown), the method fails.

    I'm just wondering if this is a bug with the  getStartPositionOfChar() method, or if I am doing something wrong with my call. I have verified that the text is set before the method call, and it works perfectly for anything besides a single leading space or 2 spaces in a row. Also this same code works great in Firefox and Chrome. I tested this in IE 10 and it seems to fail there as well. Maybe this is an IE bug, so if someone could point me to where I can report it, that would be great.

    Thanks,

     
    Thursday, January 31, 2013 7:36 PM

All replies

  • Hi Jlange88,

    Could you share us a fully sample that can demonstrates the issue, so that we can test and determine what the root cause of the error you are facing.

    thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, February 06, 2013 2:48 AM
    Moderator
  • Sure, here is the some code that seems to replicate the problem. (It's not my exact code, but I believe it accurately represents the issue).

    Here is my starting SVG. The textContent of the element with id=output is " Test"

    <svg>
        <text id="output" font-family="Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif"stroke="#000000" fill="#000000" font-size="12" x="100" y="100"> Test</text>
    </svg>


    Here is some javascript to represent the problem.

    var elem = document.getElementById("output");
    var str = elem.textContent;
    var len = str.length;
    
    console.log("'" + str + "'");
    
    if(len){
        for(var i=0; i<len; i++) {
            var start = elem.getStartPositionOfChar(i);
            var end = elem.getEndPositionOfChar(i);
            
            console.log(str.charAt(i) + " Start: " + start.x + "," + start.y);
            console.log(str.charAt(i) + " End: " + end.x + "," + end.y);
        }
    }


    When I run this in IE 10, the output to the console is:

    ' Test' 
       Start: 100,100 
       End: 109.77000427246094,100 
     T Start: 109.77000427246094,100 
     T End: 118.67000579833984,100 
     e Start: 118.67000579833984,100 
     e End: 126.67000579833984,100 
     s Start: 126.67000579833984,100 
     s End: 131.12001037597656,100 
    SCRIPT5022: IndexSizeError 
    show, line 28 character 9

    However, if I run this same exact code in Google Chrome and Firefox, my output does not have an error.

    Start: 100,100 fiddle.jshell.net:31
    T Start: 109,100 fiddle.jshell.net:31
    T End: 116,100 fiddle.jshell.net:32
    e Start: 116,100 fiddle.jshell.net:31
    e End: 124,100 fiddle.jshell.net:32
    s Start: 124,100 fiddle.jshell.net:31
    s End: 128,100 fiddle.jshell.net:32
    t End: 0,0

    Here is a link to my test fiddle

    I would also like to point out that if I change the textContent of the the text element to something like "Test  H", (two spaces between the word test and H) my output in IE also errors:

     'Test  H' 
     T Start: 100,100 
     T End: 109.77000427246094,100 
     e Start: 109.77000427246094,100 
     e End: 118.67000579833984,100 
     s Start: 118.67000579833984,100 
     s End: 126.67000579833984,100 
     t Start: 126.67000579833984,100 
     t End: 131.12001037597656,100 
       Start: 131.12001037597656,100 
       End: 135.57000732421875,100 
       Start: 135.57000732421875,100 
       End: 147.12001037597656,100 
    SCRIPT5022: IndexSizeError 
    _display, line 28 character 9

    However, again in Chrome and Firefox, it produces the correct result:

    T Start: 100,100 fiddle.jshell.net:31
    T End: 109,100 fiddle.jshell.net:32
    e Start: 109,100 fiddle.jshell.net:31
    e End: 116,100 fiddle.jshell.net:32
    s Start: 116,100 fiddle.jshell.net:31
    s End: 124,100 fiddle.jshell.net:32
    t Start: 124,100 fiddle.jshell.net:31
    t End: 128,100 fiddle.jshell.net:32
    Start: 128,100 fiddle.jshell.net:31
    Start: 132,100 fiddle.jshell.net:31
    H End: 0,0


    Finally, for my initial problem, if I set the textContent to equal a single space, (" "), my output in IE is:

     ' ' 
    SCRIPT5022: IndexSizeError 
    _display, line 28 character 9

    While in Chrome and Firefox, my output is:

    End: 0,0

    What I'm attempting to do with my code is create a text editor using SVG. Specifically this code is to place a blinking cursor after the last character the user typed in. For a more robust example, please see SVG-Edit, and using the text tool on the left, it achieves the desired functionality. If you would like to inspect the script for a better example, the pertaining lines are 3885 to 3920 in the script file svgcanvas.js. This functionality works perfectly in Chrome and Firefox, but has the error in question when run in Internet Explorer 10.



    • Edited by Jlange88 Wednesday, February 06, 2013 5:43 PM
    Wednesday, February 06, 2013 5:32 PM
  • Hi Jlange88,

    Thank you for your reply.

    I were able to reproduce the issue, I recommend you repost this issue to our connect feedback portal at http://connect.microsoft.com with concise steps for reproducing the problem and what expected behavior should be. our developer will investigate them seriously.

    Best regards,


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, February 08, 2013 3:27 AM
    Moderator
  • I would love to report this bug in the Internet Explorer portal, but the system will not allow me to join the Internet Explorer Feedback Program. I click join and am stuck in an infinite loop of entering my info, (when I click "continue, on the preferences page, I get placed back at the initial signup page). Using Google Chrome to attempt to sign in.  
    Monday, February 11, 2013 8:09 PM