问题 如何强制Safari重绘位置：滚动固定元素？


我在桌面和移动设备上使用Safari时遇到的问题很慢，重新绘制位置元素：用户滚动时修复。

具有位置的元素：修复了safari遇到困难的元素是#intro，以及.portfolio-item .expanded-content的页脚元素。滚动中的#intro不一定重新绘制到正确的z-index（当用户滚动时，它应该在其他元素后面）。移动设备上的页脚元素不会停留在iOS Safari中滚动内容的固定位置。在iOS游戏中滚动是jaggy（然而，iOS Chrome是流畅的，一切都按预期工作）。

我做了一个小提琴，我删除了所有的图像，字体和JS，并且看，safari没有重新绘制位置的问题：固定元素滚动。

由于这是一个投资组合网站，剥离我的图像显然不是一个选择。我真的希望这个真正的单页网站，而不是使用AJAX或任何东西来按需加载内容。我是否要求太多的safari拥有那么多元素并且能够重新定位具有位置的元素：固定在滚动上？ Chrome和FF似乎没有问题; IE9,10,11也没有。

我不完全确定它是一个重新绘制的问题，但你可以在下面的视频中看到，如果我通过触发一个非滚动的事件（如鼠标悬停事件）强制Safari重绘，它会重新绘制并放置该位置：fixed element在我的样式表中指定的z-index中。因此，结合小提琴工作就好了，这就是为什么我认为它是一个重新绘制的问题，而不是我的代码的问题。

我希望找到一种解决这个问题的方法，而不需要求助于更多的JS或动态加载的内容，以保持相同的设计（不要放弃使用position：fixed或流畅布局的想法，因为一个浏览器遇到问题它）并试图保持性能快速和顺利。我想在每次用户滚动强制safari重绘时使用JS，但在我看来，这似乎会对所有浏览器的性能产生负面影响。我真的可以使用其他人的想法和观点。

网站： http://sarahjean.co

小提琴： http://jsfiddle.net/sjc8611/n9z3W/

视频： https://dl.dropboxusercontent.com/u/24724104/position-fixed-repaint-lag-safari.mov

html：

    <nav data-scroll-header="" id="main-navigation">
    <ul>
        <li><a href="#work" data-scroll="">Work</a>

        </li>
        <li><a href="#about" data-scroll="">About</a>

        </li>
        <li><a href="#services" data-scroll="">Services</a>

        </li>
        <li><a href="#contact" data-scroll="">Contact</a>

        </li>
    </ul>
</nav>
<div class="header" id="header">Header Content</div>
<section id="intro" class="container">
    <article class="content">
            <h1>Introduction Text</h1>

        <p>Welcome to my super cool portfolio site. Check out how awesome I am. You should totally hire me.</p>
    </article>
</section>
<section id="work" class="container">
    <article class="content">
            <h1>Work</h1>

        <nav id="portfolio-navigation">
            <ul>
                <li><a href="#work1">See My Work 1</a>

                </li>
                <li><a href="#work2">See My Work 2</a>

                </li>
            </ul>
        </nav>
    </article>
    <article id="work1" class="portfolio-item">
        <div class="expanded-content">
                <h2 class="center">Here is some of my work!</h2>

            <p>Lorem ipsum dolor sit amet..</p>
            <footer><a href="#work">Close</a>

            </footer>
        </div>
    </article>
    <article id="work2" class="portfolio-item">
        <div class="expanded-content">
                <h2 class="center">More of my cool work!</h2>

                <h1>Proin Quis Tortor Orci. Etiam At Risus</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
            <footer><a href="#work">Close</a>

            </footer>
        </div>
    </article>
</section>
<section id="contact" class="container">
    <article class="content">
            <h1>Contact</h1>

        <ul id="contact-list">
            <li>I would include a list of ways to contact me here</li>
            <li>Emails</li>
            <li>Telephones</li>
            <li>The postal services</li>
        </ul>
    </article>
</section>
<section id="services" class="container">
    <article class="content">
         <h1>Services</h1>
        <p>Lorem ipsum dolor sit amet..</p>
    </article>
</section>

CSS：

body {
    background: #fff8ec;
    margin: 0 auto;
    height: 100%;
}
html {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 135%;
    color: #4b3d2f;
    height: 100%;
}
h1, h2, h3, h4, h5 {
    font-family: Arial, sans-serif;
}
h1 {
    color: #aba499;
    text-align: center;
    font-size: 2em;
}
.portfolio-item h2 {
    font-size: 1.8em;
}
a, a:link, a:visited {
    color: #c85128;
    text-decoration: none;
}
a:hover {
    color: #4b3d2f;
}
p {
    margin: 1em 0;
    line-height: 135%;
}
img {
    max-width: 100%;
    height: auto;
}
.container {
    width: 100%;
    position: relative;
    background-color: #e5e2de;
    padding: 100px 0;
}
.container > .content {
    width: 80%;
    margin: 0 auto;
    max-width: 800px;
    background-color: transparent;
}
#header {
    background-color: #c85128;
    height: 95%;
    position: relative;
    z-index: 3;
    display: table;
    width: 100%;
}
#intro {
    background-color: transparent;
    position: fixed;
    top: 5%;
    left: 0px;
    height: 25%;
    padding: 5% 0;
    z-index: 0;
}
#intro > .content {
    background-color: #fff8ec;
    width: 70%;
    padding: 5%;
    border-radius: 20px;
    box-shadow: 0px 1px 3px #e5e2de;
}
#work {
    margin-top: 55%;
    background-color: #dedad5;
}
#contact {
    background-color: #d8d3cd;
}
#services {
    background-color: #d1cbc4;
}
#about {
    background-color: #cac4bc;
}
section h1 {
    padding: 50px 0;
}
article .expanded-content h2, article .expanded-content p {
    margin: 50px auto;
}
#main-navigation {
    display: table;
    width: 100%;
    background-color: #aba499;
    position: fixed;
    top: 0;
    left: 0;
    height: 3em;
    overflow: visible;
    z-index: 2;
}
#main-navigation a {
    color: #fff8ec;
    font-family:'NovecentowideBookRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: block;
}
#main-navigation a:hover {
    color: #4b3d2f;
    text-shadow: 0em -0.05em 0em #e5e2de;
}
#main-navigation ul {
    display: table-row;
    height: 3em;
    overflow: visible;
}
#main-navigation ul li {
    display: table-cell;
    width: 20%;
    padding: .8em;
    text-align: center;
    vertical-align: middle;
}
.portfolio-item {
    max-height: 0px;
    height: 0px;
    overflow: hidden;
    position: fixed;
    top: 3em;
    left: 0%;
    -webkit-transition: height 700ms ease;
    -moz-transition: height 700ms ease;
    -ms-transition: height 700ms ease;
    -o-transition: height 700ms ease;
    transition: height 700ms ease;
}
#work1:target, #work2:target {
    max-height: 1000px;
    opacity: 1;
    width: 80%;
    height: 70%;
    padding: 5%;
    top: 5%;
    left: 5%;
    background-color: #fff;
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    z-index: 10;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#work1:target .expanded-content, #work2:target .expanded-content {
    max-width: 900px;
    margin: 0 auto;
}
#work1:target .expanded-content footer, #work2:target .expanded-content footer {
    display: block;
    width: 90%;
    text-align: right;
    background-color: #c85128;
    position: fixed;
    top: 5%;
    left: 5%;
    z-index: 11;
}
#work1:target .expanded-content footer a, #work2:target .expanded-content footer a {
    display: block;
    padding: 1em;
    color: #e5e2de;
    height: 1em;
}

3694
2018-04-03 16:00


起源
想要帮助，但我没有看到你在视频中说明的问题。测试了Safari（桌面）6.1.2，Safari Mobile（3G上的iOS 6），Chrome 33（桌面），Chrome iOS。 “设计/开发服务”框在我测试时显示。 - cantera
谢谢。我正在Safari 7.0.3上为桌面测试它，但仍然遇到问题。我问过几个我认识的人在他们的环境中尝试它，他们也遇到了我的问题。也许我应该看看6.1.2和7.0.3之间的区别是什么？编辑：我刚刚在我丈夫的电脑上测试了6.1.2，我也遇到了同样的问题。 - Sarah Jean
我厌倦了在野生动物园5.17我找不到问题... - T J
我刚登录到我的跨浏览器测试帐户，并在safari 6.1上的OSX 10.7和10.8上尝试过，我可以在那里复制问题，所以我不确定为什么你们两个在我不能复制它时在我有权访问的每个Safari测试环境中看到它。这是我们滚动方式的不同吗？你在刷/使用鼠标滚轮吗？单击滚动条？你只是点击导航？当您滚动可能触发鼠标悬停事件时，您的光标是否停留在页面上的其他元素上？ - Sarah Jean

答案:

你不是疯了。我有问题 position: fixed 元素没有重新绘制。尚未找到解决方案。

编辑 找到了解决方案。你可以通过触发一个碰撞它大小的CSS动画来制作几乎任何重绘的东西。这是我正在使用的片段：

.foo
  position: fixed
  &.active
    animation: repaint 1ms

@keyframes repaint
  from
    width: 99.999%
  to
    width: 100%

7
2017-07-09 04:29


你能详细解释一下css风格吗？ “＆.active”是什么意思？ - malex
对不起，这是手写笔。这意味着.foo.active - corysimmons
哇，优雅而简单的解决方案。我有一个相当复杂的菜单栏，在iOS上我有一个问题，当scrollTop需要删除固定类。这种方法完全解决了我的问题。 - Human Askari
这个解决方案有什么副作用？ - Gunchars
我真的不知道。自从我使用或需要它以来已经有一段时间了。 - corysimmons

我遇到了完全相同的问题 Safari 9.1。

在大多数情况下，延长动画执行的时间对我有效。

@keyframes repaint {
  from {
    width: 99.999%
  }
  to {
    width: 100%
  }
}

.repaint {
  animation: repaint 5000ms;
}

但是，如果固定位置DOM元素位于父级内部，高度发生了变化（例如，当动态添加新的DOM元素时父级高度可以更改），那么即使将动画时间延长到不合理的值，它也不适用于我。

我的最终解决方案是放弃 animation 破解并用JS强制重绘

$('.repaint').hide().show(0);

如建议的那样 在Chrome / Mac上强制DOM重绘/刷新

我使用AngularJS，并且在所有情况下都要使用此hack，我不得不称之为 .hide().show(0) 在每个摘要循环上。

以AngularJS指令的形式Hack：

function ForceRepaintDirective() {
  return {
    restrict: 'EA',
    link: function(scope, $element) {
      scope.$watch(function() {
        $element.hide().show(0);
      });
    }
  };
};

2
2018-05-19 03:46



如果你不知道什么是手写笔样式，因此不能使用@CorySimmons的解决方案，这里是上面代码的css版本。此外，我不得不更改一些值，显然上面的值在iOS 8中不起作用

@-webkit-keyframes repaint {

    from {
        width: 99.9%;
    }
    to {
        width: 100%;
    }

}

@-moz-keyframes repaint {

    from {
        width: 99.9%;
    }
    to {
        width: 100%;
    }

}

@keyframes repaint {

    from {
        width: 99.9%;
    }
    to {
        width: 100%;
    }

}

.repaint {
    -webkit-animation: repaint 100ms;
       -moz-animation: repaint 100ms;
        -ms-animation: repaint 100ms;
            animation: repaint 100ms;
}

您需要做的就是在需要重新绘制时为固定元素提供一类.repaint。在我的例子中，它是一个粘性导航使用jQuery的scrollTop（）来添加和删除我的标头中的类，所以在需要时，jquery函数还将.repaint类添加到我的标头，它解决了我的问题。


1
2017-11-18 12:52



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来