3

当具有 position:fixed 的元素包含在具有 position:relative 的元素中并且页面上的任何元素都具有 -webkit-transform 时，Chrome 和 Safari 似乎存在问题。有一个渲染问题，有点难以解释，但你可以在这里看到：http: //jsfiddle.net/ragulka/byGGH/1/

代码：

<div id="sticky-container">
    <div id="sticky">
        <div class="test"></div>
    </div>
</div>
<div id="long">
    <button class="pull-right">Change color</button>
    <ol>
        <li>1. Click change color. The color changes.</li>
        <li>2. Scroll down so that the red box is just half-way over the gray area.</li>
        <li>3. Click change color again. The color does not change.</li>
        <li>4. Scroll down even more. The color changes while you scroll.</li>
    </ol>
</div>
<i class="icon-spin">H</i>
<style type="text/css">
    #sticky-container {
        height: 50px;
        position: relative;
        z-index: 100;
    }

    #sticky {
        background: red;
        height: 50px;
        width: 100px;
    }
    button {
        margin-top: 100px;
    }

    #sticky.blue {
        background: blue;
    }

    #long {
        height: 1000px;
        background: silver;
        position: relative;
        z-index: 0;
    }

    .icon-spin {
      display: inline-block;
      -moz-animation: spin 2s infinite linear;
      -o-animation: spin 2s infinite linear;
      -webkit-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;
      width: 10px;
        height: 10px;
        background: yellow;
        position: absolute;
    }
    @-moz-keyframes spin {
      0% {
        -moz-transform: rotate(0deg);
      }
      100% {
        -moz-transform: rotate(359deg);
      }
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(359deg);
      }
    }
    @-o-keyframes spin {
      0% {
        -o-transform: rotate(0deg);
      }
      100% {
        -o-transform: rotate(359deg);
      }
    }
    @-ms-keyframes spin {
      0% {
        -ms-transform: rotate(0deg);
      }
      100% {
        -ms-transform: rotate(359deg);
      }
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#sticky').affix(100);

        $('button').on('click', function() {
            $('#sticky').toggleClass('blue');
        });
    })
</script>

这在 Firefox 中运行良好。没有在IE中测试过。

有没有其他人有同样的问题，是已知的错误还是我做错了什么？

4

0 回答 0