Databases
StackOverflow2013
Postsdbo
POtext-transform: uppercase causes layout error on Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtext-transform: uppercase causes layout error on Chrome
    text
    copied!<p>I've run across a strange layout bug that appears to be triggered by the <code>text-transform</code> CSS property when an <code>inline-block</code> is nested within a <code>block</code> element. I saw the problem on Safari (5.1.2) as well, but this minimal test case only triggers on Chrome (17.0.963.56).</p> <p>The particularly interesting bit is that opening the developer tools and keeping it on the Elements tab triggers the correct layout. My best guess is that the combination of CSS rules and DOM structure is causing the webkit engine to miss performing a reflow of the page.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Menu Widget Test&lt;/title&gt; &lt;style type="text/css"&gt; .container { border: 1px solid black; display: inline-block; } .title { text-transform: uppercase; /* &lt;-- Remove this and it works */ } &lt;/style&gt; &lt;script type="text/javascript"&gt; document.addEventListener("DOMContentLoaded", function() { document.getElementById("firstName").innerHTML = "John"; document.getElementById("lastName").innerHTML = "Smith"; }, false); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;!-- Remove this DIV element, and it works --&gt; &lt;span class="container"&gt; &lt;span class="title"&gt; &lt;span id="firstName"&gt;&lt;/span&gt; &lt;span id="lastName"&gt;&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here are two screenshots that show the two ways that it renders on Chrome, depending on whether or not the <code>text-transform</code> rule is removed, or the <code>div</code> element is removed.</p> <p><img src="https://i.stack.imgur.com/XAoPW.png" alt="Bad rendering on the left, correct on the right"></p> <p>I would like to use the <code>text-transform</code> property, but I am wondering if this is a known bug and what I can do to ensure that I do not trigger the behavior. Even being able to explicitly trigger a reflow event might be good enough.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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