text-transform: maiúsculas causa erro de layout no Chrome
Encontrei um bug de layout estranho que parece ter sido acionado pelotext-transform Propriedade CSS quando uminline-block está aninhado dentro de umblock elemento. Também vi o problema no Safari (5.1.2), mas esse caso de teste mínimo é acionado apenas no Chrome (17.0.963.56
A parte particularmente interessante é que abrir as ferramentas do desenvolvedor e mantê-las na guia Elementos aciona o layout correto. Meu melhor palpite é que a combinação de regras CSS e estrutura DOM está fazendo com que o mecanismo do webkit perca a execução de um reflow da página.
<!DOCTYPE html>
<html>
<head>
<title>Menu Widget Test</title>
<style type="text/css">
.container
{
border: 1px solid black;
display: inline-block;
}
.title
{
text-transform: uppercase; /* <-- Remove this and it works */
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("firstName").innerHTML = "John";
document.getElementById("lastName").innerHTML = "Smith";
}, false);
</script>
</head>
<body>
<div> <!-- Remove this DIV element, and it works -->
<span class="container">
<span class="title">
<span id="firstName"></span>
<span id="lastName"></span>
</span>
</span>
</div>
</body>
</html>
Aqui estão duas capturas de tela que mostram as duas maneiras que ele renderiza no Chrome, dependendo de otext-transform regra é removida ou odiv elemento @ foi removid
Gostaria de usar otext-transform, mas estou me perguntando se esse é um bug conhecido e o que posso fazer para garantir que não desencadeie o comportamento. Mesmo sendo capaz de disparar explicitamente um evento de refluxo pode ser bom o suficient