[thelist] Safari Reflow Oddity

Joshua Olson joshua at waetech.com
Thu Oct 20 14:46:15 CDT 2005

I have just experienced a weird bug with Safari (v1.0.3).  Can anybody
explain this behavior?  The problem is fairly simple... If you change text
using childNodes[0].nodeValue then the text flow within the parent container
is not recalculated.  If you change it via innerText, then it is.  The
following code demonstrates it... click on Change It (v1) and the text is
replaced with new text, but it's not centered.  Click Change It (v2) and the
text is again replaced, but this time it's centered.

<div style="text-align: center"><span id="testspan">This kind of long text
is centered</span></div>

<script type="text/javascript">
  function change1()
    var span = document.getElementById('testspan');
    span.childNodes[0].nodeValue = 'change1() text';

  function change2()
    var span = document.getElementById('testspan');
    span.innerText = 'change2() text';
<a href="" onclick="change1(); return false;">Change It (v1)</a>
<a href="" onclick="change2(); return false;">Change It (v2)</a>

My current work around is to execute both an update to innerText and
childNodes[0].nodeValue.  I'm not fond of this as it seems cludgy.. any
ideas on how to get around this or even why this behavior exists?

Joshua L. Olson
WAE Tech Inc.
Phone: 706.210.0168 
Fax: 413.812.4864

Monitor bandwidth usage on IIS6 in real-time:

More information about the thelist mailing list