Note that there are some explanatory texts on larger screens.

plurals
  1. POI need a workaround for a safari/chrome bug that is becoming a thorn in my side
    primarykey
    data
    text
    <p>So I have this neat little javascript function that I'm using to print text to the browser window in a cool command-prompty style. It takes a string and prints it one character at a time to the window at a set interval. Here it is: (I have cut out all the unnecessary parts so that this will work as a standalone example.)</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var letterIndex = 0; var intervalId = 0; function writeOneLetter(myString) { var char = myString[letterIndex]; $('#display').append(char); letterIndex++; if (letterIndex &gt;= myString.length) { letterIndex = 0; clearInterval(intervalId); } } $(function () { $('#caret').html('\u2588'); //This will help you visualize where the script is at in it's sequence and make it painfully obvious when the freezing issue occurs. // The following string sample is so long because it is important that you be able to duplicate this error to understand my question. var myString = "Quisque vestibulum consequat orci, in euismod tortor dapibus eu. Duis nec urna nec erat sagittis pretium vel ac diam. Nulla mi lorem, tempor ut cursus in, mattis non libero. Curabitur eget venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit ante in ligula tincidunt quis vehicula massa scelerisque. Pellentesque nec posuere massa. Sed eget nunc a erat dictum faucibus. In vitae tempor lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel imperdiet tellus. Suspendisse ultricies sem a libero sagittis feugiat. Ut convallis magna eu mauris molestie dapibus. Nulla feugiat urna non ante facilisis non ultrices nisi viverra. Aliquam vitae magna libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at odio sit amet nisi dapibus scelerisque. In fringilla lorem at sapien rutrum scelerisque." intervalId = setInterval(function () { writeOneLetter(myString); }, 15); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span id="display"&gt; &lt;/span&gt;&lt;span id="caret"&gt;&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Go here <a href="http://www.jsfiddle.net/Chevex/6n5VV/" rel="nofollow">http://www.jsfiddle.net/Chevex/6n5VV/</a> to try out the sample code above.</p> <p>If you are in IE or FF the code will run exactly as expected, writing out every character in the string until it finishes. However, if you run this code in Chrome or Safari you get an interesting bug. Sometimes, when the line hits the side of its container and the words wrap and drop to the next line, it freezes. The typing stops being rendered to the browser, but it is still happening in the DOM because if the page gets modified or the browser resized then the remaining text appears all at once.</p> <p>A couple things I have noticed about this are that it only seems to happen when it drops down a line with a leading space. Also, if you resize the browser window while the script is still running or after the script has finished, it will suddenly burst back into action and you will see the rest of the text. Any resizing, maximizing, etc will start the letters showing up again; only to freeze again later of course.</p> <p>It's extremely frustrating since it never shows the rest of the string unless the page is modified by more javascript afterward or the browser is resized. It completely defeats the entire purpose of writing the script in the first place when this happens.</p> <p>Any ideas? I'm completely stumped and Google turns up nothing.</p> <p><strong>EDIT:</strong></p> <p>If you cannot reproduce the error it is probably because your screen is a different resolution than my own and you are getting lucky. Try to resize either the browser window, the jsFiddle display container, or both and then run the script again. It shouldn't take much before you see it freeze. Try to aim so that one of the lines will word wrap on a space, this seems to be where it happens mostly.</p> <p>I have done this in chrome and safari on 3 different computers, one on a completely different network altogether. If you still can't see the error then run it in chrome and firefox side by side. If chrome seems to finish earlier than FF then that is the freezing glitch in action. If you resize the browser or modify the page in any way then suddenly all the remaining text will appear at once.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload