[Webkit-unassigned] [Bug 99606] New: Asynchronous update to element with text-transform does not update metrics

Wed Oct 17 10:10:14 PDT 2012

https://bugs.webkit.org/show_bug.cgi?id=99606

           Summary: Asynchronous update to element with text-transform
                    does not update metrics
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh
               URL: http://jsfiddle.net/oravecz/hwkM8/
        OS/Version: Mac OS X 10.8
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: jcook at pykl.com

It seems that on Webkit browsers (tested on Chrome Version 22.0.1229.94 and Safari Version 6.0.1 (8536.26.14)) content which is asynchronously updated in an element with text-transform applied will not have margins reapplied.

Pseudo-steps:
1. Create an inline-block element with no content.
2. Apply a text-transform: uppercase style to it.
3. Apply a margin to the element.
3. Create a setTimeout function that will run a second after page load.
4. In the async function, update the DOM contents of the aforementioned element.

The problem is that the DOM contents will be updated, but the margin on the element will not be reapplied based on the element's new contents as it should.

Example to reproduce, or go to http://jsfiddle.net/oravecz/hwkM8/ for a live example.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type='text/css'>
    a {
    float: left;
    margin: 0 20px 10px 20px;
    display: inline-block;
}

a.upper {
    text-transform: uppercase;
}    

p {
    clear: left;
    margin: 20px 0;
}
  </style>

</head>
<body ng-app="myApp">
  <h1>Webkit Bug</h1>    
<p>
    This one took me a long time to figure out. It seems that on Webkit
    browsers (tested on Chrome Version 22.0.1229.94 and Safari Version
    6.0.1 (8536.26.14)) content which is asynchronously updated in an 
    element with text-transform applied will not have margins reapplied.
</p>
<p>
    An example is best to illustrate. The "menu" shown below is a simple
    set of $lt;a> tags floated left, made inline-block, text transformed
    to uppercase and with a margin. 
</p>
<p>
    <b>Note: The menu labels are static</b>    
</p>    
    <a href="#" class="upper">Menu Item</a>
    <a href="#" class="upper">Menu Item</a>
    <a href="#" class="upper">Menu Item</a>
    <a href="#" class="upper">Menu Item</a>

<p>
    In the next example, the styles are exactly the same, but the
    menu labels are inserted via Javascript during the window.load
    event.
</p>
<p>
    <b>Note: The menu labels are dynamically inserted.</b> The problem
    on the noted Webkit-based browsers shows that the margins are not     
    recalculated for these elements after the text is inserted. The
    individual menu items are stacked on top of each other because
    the dimensions of the <a> tags are the same as before the new
    labels were inserted.
</p>    
    <a href="#" class="upper findme"></a>
    <a href="#" class="upper findme"></a>
    <a href="#" class="upper findme"></a>
    <a href="#" class="upper findme"></a>

<p>
    These menu labels are dynamically inserted but do <b>not</b>    
    have a text-transform applied.
</p>    
    <a href="#" class="findme"></a>
    <a href="#" class="findme"></a>
    <a href="#" class="findme"></a>
    <a href="#" class="findme"></a>

<script type='text/javascript'>//<![CDATA[ 

var updateContents = function() {
    var eles = document.getElementsByClassName('findme');
    for (var i = 0, c = eles.length; i < c; i++) {
        eles[i].innerHTML = 'Menu Item';
    }
}

window.onload = function() {    
    setTimeout(updateContents, 1000);
}

//]]>  

</script>

</body>

</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.