text-transform: en mayúsculas se produce un error de diseño en Chrome
Me he encontrado con un extraño error de diseño que parece ser activado portext-transformropiedad @ CSS cuando unainline-block está anidado dentro de unablock elemento. También vi el problema en Safari (5.1.2), pero este caso de prueba mínimo solo se activa en Chrome (17.0.963.56).
El bit particularmente interesante es que abrir las herramientas de desarrollador y mantenerlo en la pestaña Elementos activa el diseño correcto. Mi mejor conjetura es que la combinación de reglas CSS y estructura DOM está causando que el motor del kit de web no realice un reflujo de la págin
<!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>
quí hay dos capturas de pantalla que muestran las dos formas en que se representa en Chrome, dependiendo de si latext-transforma regla @ se elimina o ladiv elemento se elimina.
Me gustaría usar latext-transform propiedad, pero me pregunto si se trata de un error conocido y qué puedo hacer para garantizar que no active el comportamiento. Incluso ser capaz de activar explícitamente un evento de reflujo podría ser lo suficientemente bueno.