Question

编辑：我报告了错误here

我遇到了一个webkit的错误，这让我感到非常悲痛。这是我的情况。我在一个居中的绝对定位div中有一个图像。我希望能够更改此div的父级的高度以使图像更改高度，但保留其宽高比和中心对齐。以下在Firefox中运行良好，但在Chrome中失败：

在文本框中输入高度，然后按Enter键。这是发生的事情：

我正在寻找一种方法来强制webkit正确地重绘布局。我还想确保它在webkit bug跟踪器中。

＆＃13;

<!DOCTYPE html>
<html>
  <head><title>Webkit bug</title></head>
  <style>
    #changesHeight {
      position: relative;
    }
    
    #child {
      position: absolute;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
    }
  </style>
  <body>
    <div id="changesHeight" style="height: 200px;">
      <div id="child">
        <img style="height: 100%" src="data:image/gif;base64,R0lGODlhMgAyAIQQACYaElQgElEYbboUCg1LCZI8COQqOuFIBiyfx9GFLWSuC8ChQ92cf+K/CN23f+nKsP///////////////////////////////////////////////////////////////yH5BAEKABAALAAAAAAyADIAAAX+4COO5Micjvk4jMMmRcA8Z10bBW4cQ5uUQBGrpmoxEozCiXYyNBnOXeFwTPyCwKFotrIVvrObEwqd9hyJxhVb0m6FpxgXaqjXyweqOp1wsUlJXEwnAQFyTXaJU0pofH1+fyIyggKVljKJdgMDdXoHe2ouLCl/AjIilpUBAJiZmwMFPVagVqIppFiVTamVAHR1nAavAwkHVo7HaLa4JbzOAJnAm7F5eWp7jy5GkM3OqdCurzvVxse12X633d694QMBA+TV5o+PLaMlDOyX7vHyefTQ3VomAsE+VYmGkYu3I54VY8qQaBOlQMECGgcFuFvIY1OeL8nSKBvFYEFFAgD+Mib0yKPlMJC1IqJpsKziyYPiWMYbxtIYREc0Zy0YavPmN1OsePpTSK7YJx+NEiyQOpRAUZspAWjdmtRQx54AwwJsQNbRVJMKrKY9ybXtKq3+mvqUm4as3bImrapl27ZvAHlO5wF2cLcwWZt6+yqeMvefWIiGI999q5gVALmP/0mVzHmB4kKgYXC+hqT05sh1GywgO/XLKtAMfNVYPZqmOsKpVeueZeWL7xgBHgAQQWCEydq4opIm3ds3LNcMCEh/gPgBgusKOKd7IHWW6gUOFvxe5HqV9PNFr6tHQN3wRVJWho5CM5R8+bfSAUi/un599ru2DNXHMVPR9xtoWp3+h9JeNvW3XmG3AFVgH1PBABx+CjKImIPr0SYKb+dElQCCCeaHEgIaVsTheit82B19x1QRw1YZSsfAVemxiIWIFZpTgBUYmqgfAA7geJJ6kSBjRRKluaZfjUMauSF7fwTkY28BkIKikAigZeRFkXBHz48/YrlMCkKulh1BK4QJw5tXfrHdfAuglCUzWSR5DJkPydnmmWigJMgIkJCCJwm+FdMnGLa02AJ4VviCp6G3YQFAomV+Ad5ALIBXUkkJSJpFo20GoRWfzwEqCnhDBeBZAULEuqpt3JCglSEWuhrgUPKFV5J4RP7Zogus0nroreTJZ9FaVvEqXn2XGtoieA15FEUTeCWc6puXNUq3KQECirpMtVKCOYK2AXRbo0WtLrDKD6LQlJ2UFS0giLYKprVfjc66CwC2RdJ7Fbg0CAfavupmWOeIADxyFbn0uisCK+milzC/q1BrE8QCKyADAiWum/CTnv1rJMc4JgayxRdn+CQrKG/c8YkhAAA7" />
      </div>
    </div>
    <input style="position: fixed; top: 0; left: 0" type="number" value="200">
    <script>
      document.getElementsByTagName('input')[0].onchange = function(a) {
        document.getElementById('changesHeight').style.height = this.value + 'px';
      };
    </script>
  </body>
</html>

＆＃13;

Answer 1

您可以设法实现跨浏览器并不一定是个错误。尝试只使用外部容器和里面的图像（而不是中间的另一个孩子），并允许图像自行调整大小：

＆＃13;

<!DOCTYPE html>
<html>
  <head><title>Webkit bug</title></head>
  <style>
    #changesHeight {
      position: relative;
      border : red solid 1px;
      width : 100%;
      height : 200px;
    }
    
    #changesHeight img {
      position : absolute;
      max-height : 100%;
      height : 100%;
      left : 50%;
      transform : translateX(-50%);
      border : blue dashed 1px;
    }
    
    .spacer {
      height: 2000px;
    }
  </style>
  <body>
    <div id="changesHeight" style="height: 200px;">
        <img src="data:image/gif;base64,R0lGODlhMgAyAIQQACYaElQgElEYbboUCg1LCZI8COQqOuFIBiyfx9GFLWSuC8ChQ92cf+K/CN23f+nKsP///////////////////////////////////////////////////////////////yH5BAEKABAALAAAAAAyADIAAAX+4COO5Micjvk4jMMmRcA8Z10bBW4cQ5uUQBGrpmoxEozCiXYyNBnOXeFwTPyCwKFotrIVvrObEwqd9hyJxhVb0m6FpxgXaqjXyweqOp1wsUlJXEwnAQFyTXaJU0pofH1+fyIyggKVljKJdgMDdXoHe2ouLCl/AjIilpUBAJiZmwMFPVagVqIppFiVTamVAHR1nAavAwkHVo7HaLa4JbzOAJnAm7F5eWp7jy5GkM3OqdCurzvVxse12X633d694QMBA+TV5o+PLaMlDOyX7vHyefTQ3VomAsE+VYmGkYu3I54VY8qQaBOlQMECGgcFuFvIY1OeL8nSKBvFYEFFAgD+Mib0yKPlMJC1IqJpsKziyYPiWMYbxtIYREc0Zy0YavPmN1OsePpTSK7YJx+NEiyQOpRAUZspAWjdmtRQx54AwwJsQNbRVJMKrKY9ybXtKq3+mvqUm4as3bImrapl27ZvAHlO5wF2cLcwWZt6+yqeMvefWIiGI999q5gVALmP/0mVzHmB4kKgYXC+hqT05sh1GywgO/XLKtAMfNVYPZqmOsKpVeueZeWL7xgBHgAQQWCEydq4opIm3ds3LNcMCEh/gPgBgusKOKd7IHWW6gUOFvxe5HqV9PNFr6tHQN3wRVJWho5CM5R8+bfSAUi/un599ru2DNXHMVPR9xtoWp3+h9JeNvW3XmG3AFVgH1PBABx+CjKImIPr0SYKb+dElQCCCeaHEgIaVsTheit82B19x1QRw1YZSsfAVemxiIWIFZpTgBUYmqgfAA7geJJ6kSBjRRKluaZfjUMauSF7fwTkY28BkIKikAigZeRFkXBHz48/YrlMCkKulh1BK4QJw5tXfrHdfAuglCUzWSR5DJkPydnmmWigJMgIkJCCJwm+FdMnGLa02AJ4VviCp6G3YQFAomV+Ad5ALIBXUkkJSJpFo20GoRWfzwEqCnhDBeBZAULEuqpt3JCglSEWuhrgUPKFV5J4RP7Zogus0nroreTJZ9FaVvEqXn2XGtoieA15FEUTeCWc6puXNUq3KQECirpMtVKCOYK2AXRbo0WtLrDKD6LQlJ2UFS0giLYKprVfjc66CwC2RdJ7Fbg0CAfavupmWOeIADxyFbn0uisCK+milzC/q1BrE8QCKyADAiWum/CTnv1rJMc4JgayxRdn+CQrKG/c8YkhAAA7" />
    </div>
    
    <input style="position: fixed; top: 0; left: 0" type="number" value="200">
    <script>
      document.getElementsByTagName('input')[0].onchange = function(a) {
        document.getElementById('changesHeight').style.height = this.value + 'px';
      };
    </script>
  </body>
</html>

＆＃13;

Webkit错误渲染中心绝对div

1 个答案: