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>
Created attachment 169385 [details] Patch
Comment on attachment 169385 [details] Patch Clearing review flag on patches from before 2014. If this patch is still relevant, please reset the r? flag.
Comment on attachment 169385 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=169385&action=review > Source/WebCore/rendering/RenderObject.cpp:304 > + // If setPreferredLogicalWidthsDirty was invoked before addChild, Comment might not be necessary > LayoutTests/fast/css/text-transform-async-update.html:32 > + } , 100); Might want to set the time-out to 0
Seems reasonable to me, but I'm not a reviewer
Already fixed since this report was filed