Invalid XHTML markup generated by textarea.js

I tried to validate the markup at node/add/article and got the following result:

line 76 column 291 - Warning: discarding unexpected </span>
line 76 column 516 - Warning: discarding unexpected </span>
line 94 column 210 - Warning: discarding unexpected </span>
line 76 column 285 - Warning: inserting implicit <span>
line 76 column 510 - Warning: inserting implicit <span>
line 94 column 204 - Warning: inserting implicit <span>
line 76 column 34 - Warning: missing </span> before <div>
line 76 column 336 - Warning: missing </span> before <div>
line 94 column 34 - Warning: missing </span> before <div>
line 76 column 285 - Warning: trimming empty <span>
line 76 column 510 - Warning: trimming empty <span>
line 94 column 204 - Warning: trimming empty <span>

These warnings appear only if the markup validation is performed after javascript execution (DOM editing).
They refer to the resizable textareas for the node body and teaser editing.
The problem is on line 14 of misc/textarea.js, where a new DIV (class="grippie") is created inside a wrapping SPAN
(block-level element should not be nested inside inline elements):

      $(this).wrap('<div class="resizable-textarea"><span></span></div>')
        .parent().append($('<div class="grippie"></div>').mousedown(startDrag));

The resulting markup is:

<div class="resizable-textarea">
  <span style="display: none;">
    <textarea id="edit-teaser-js" class="form-textarea teaser resizable teaser-processed textarea-processed" name="teaser_js" rows="10" cols="60"/>
    <div class="grippie" style="margin-right: -6px;"/>
  </span>
</div>

Replacing the wrapping SPAN with an DIV fixes the problem.

      $(this).wrap('<div class="resizable-textarea"><div></div></div>')
        .parent().append($('<div class="grippie"></div>').mousedown(startDrag));

The resulting markup is now correct:

<div class="resizable-textarea">
  <div style="display: none;">
    <textarea id="edit-teaser-js" class="form-textarea teaser resizable teaser-processed textarea-processed" name="teaser_js" rows="10" cols="60"/>
    <div class="grippie" style="margin-right: -6px;"/>
  </div>
</div>