JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div id='outer'>This is text inside of the 'outer' div</div>
    
    <div id='start' style="cursor: pointer; color: blue; text-decoration: underline; padding: 20px; clear: both;">Start</div>
    <div class='explanation'>Clicking 'Start' will grab the width of the 'outer' div (with the orange border) and display it in an alert box.</div>
    <div class='explanation'>After the alert is dismissed, that width value will be assigned to 'outer' via $('#outer').css({width: theWidth}); (so nothing should change).</div>
    <div class='explanation'>The trouble in FireFox is that sometimes this will cause the text to wrap, even though the width hasn't actually changed.</div>
    <div class='explanation'>In ie, if you continue to click 'Start', the width will be reduced with each click.</div>

CSS

#outer {
    border: 2px solid orange;
    float: left;
}
.explanation {
    padding: 5px;
    color: #555;
}

JavaScript

// #4869

$('#start').click(function() {
    var theWidth = $('#outer').width();
    alert('The outer div\'s width is: ' + theWidth + '\n\nAfter dismissing this alert, jQuery will assign ' + theWidth + ' to the div\'s width (yielding an unexpected result).');
    $('#outer').css({width: theWidth})
});