Miss-aligned but only sometimes

[rkni9ht]

<script>
$(document).load(function () {
    $('.string-example').highlightWithinTextarea('update');
});
</script>
<script>
    $('.string-example').highlightWithinTextarea({
        highlight: ['patel']
    });
</script>

I have a webb app where the user searches and then the search words get highlighted in the textarea. on most content of the textarea it works but on this instance and others it seems to get missaligned. the code is the same on each the only thing that is different is the content of the textareas.

I noticed on a similar issue the answer was to run the update function that made it slightly better but still has the occasional case where it throws it out. And then as the user scrolls down the text area the highlight follows.

Is there a reason this is happening?

[qrnik]

This is due to to mismatch between your textarea CSS and highlight CSS. I still haven't solved this problem by myself, but Dalimil's pull request explains it better.

[lonekorean]

Could be misaligned CSS as @pwamej stated, but then it'd be weird that calling update would have an effect. Is there somewhereI can see this code in action (public page or maybe a codepen)?