text-transform: uppercase causes layout error on C

2019-01-26 01:08发布

站内问答 / Html5
1579 2 6

I've run across a strange layout bug that appears to be triggered by the text-transform CSS property when an inline-block is nested within a block 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).

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.

<!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>

Here are two screenshots that show the two ways that it renders on Chrome, depending on whether or not the text-transform rule is removed, or the div element is removed.

Bad rendering on the left, correct on the right

I would like to use the text-transform 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.

2条回答
做自己的国王
2楼-- · 2019-01-26 01:47

I had the same problem and resolved it with white-space:nowrap;.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-01-26 01:50

There seem to be a kind of race condition in the loading of css. The following file reproduces the bug here on Chrome (17.0.963.65) on osx 10.6.8. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Schizophrenic layout</title> 
    <style type="text/css">
      body { background-image:url('gray.png'); }
      #d0{display:inline-block;}
      #d1{text-transform:uppercase;}
      #d2{text-transform:uppercase;}
    </style>
    <script type="text/javascript">
      function fill (id, text)
      {
        var e = document.getElementById (id);
        var t = document.createTextNode (text); 
        e.appendChild (t);
      }

      function main () 
      {   
        fill ("d1", "First line");
        fill ("d2", "Second line"); 
      }
      window.onload = main;
    </script>
  </head>
  <body>
    <div id="d0">
      <div id="d1"></div> 
      <div id="d2"></div>
    </div>
  </body>
</html>

Note that the bug is present even if gray.png is not a 404. You may have to reload the page a few time to witness the bug. Also if you don't GET the file over http, the bug shows only once, the first time you load the page from the disk.

There are various ways to make the bug disappear by tweaking the css. Removing only the background-image makes it disappear. Removing only the display makes it disappear. Removing only the two text-transform make it disapear. In the latter case the correct layout can be achieved by adding 

     e.style.textTransform = "uppercase";

at the end of the fill function which is, of course, a very ugly workaround.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)