Как заставить Safari перерисовать позицию: фиксированные элементы на свитке?

У меня возникают проблемы с Safari на настольных и мобильных устройствах, которые очень медленны, чтобы перекрасить элементы с позицией: исправлено при прокрутке пользователя.

Элементы с позицией: исправлено, что с сафари возникают трудности С#intro и элементами нижнего колонтитула .portfolio-item.expanded-content. #intro на прокрутке не обязательно перерисовывает правильный z-индекс (он должен находиться за другими элементами, когда пользователь прокручивает). Элементы нижнего колонтитула на мобильном устройстве не остаются в фиксированном положении над содержимым на прокрутке на сафари iOS. Прокрутка на сафари на iOS нестабильна (iOS хром, однако, является текучим, и все работает как ожидалось).

Я сделал скрипку, где я удалил все изображения, шрифты и JS, и вот, сафари не имеет проблем с перекраской позиции: фиксированные элементы в прокрутке.

Поскольку это сайт портфолио, удаление моих изображений, очевидно, не является вариантом. Я действительно надеялся сделать это настоящим одностраничным сайтом, а не использовать AJAX или что-либо, чтобы загружать контент по требованию. Я прошу слишком много сафари, чтобы иметь много элементов и иметь возможность перекрашивать элементы с позицией: фиксировано на свитке? У Chrome и FF нет проблем с этим; ни IE9, 10, 11.

Я не совсем уверен, что это перерисовывающая проблема, но вы можете увидеть в видео ниже, что если я заставляю Safari перерисовывать, вызывая событие, которое не является прокруткой, например событие mouseover, оно перерисовывает и помещает эту позицию: фиксированный элемент в z-index I, указанный в моей таблице стилей. Таким образом, этот факт, в сочетании с скрипкой, прекрасно работающей, является причиной того, что я предполагаю, что это проблема перерисовки, а не проблема с моим кодом.

Я надеюсь найти способ исправить эту проблему, не прибегая к большему количеству JS или динамически загружаемого контента, чтобы поддерживать тот же дизайн (не отказываться от идеи использования позиции: фиксированной или жидкой компоновки только потому, что один браузер проблемы с ним) и попытаться сохранить производительность быстро и плавно. Я думал об использовании 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;
}

ОТВЕТЫ

Ответ 1

Ты не сумасшедший. У меня проблемы с элементами position: fixed, которые не перерисовываются. Еще не нашли решение.

Изменить Найдите решение. Вы можете сделать почти все, что угодно, перерисовывая, вызывая анимацию CSS, которая ударяет по размеру. Вот фрагмент, который я использую:

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

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

Ответ 2

Я столкнулся с той же проблемой в Safari 9.1.

Увеличение времени выполнения анимации для меня в большинстве случаев.

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

.repaint {
  animation: repaint 5000ms;
}

Однако, если элемент DOM фиксированной позиции находился внутри родителя, высота которого изменилась (например, высота родителя может измениться при добавлении новых элементов DOM), то это не сработало для меня, даже когда время анимации увеличилось до необоснованных значений,

Моим окончательным решением было отказаться от взлома animation и принудительно перерисовать в JS с помощью

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

как предложено в Переопределить/обновить DOM на Chrome/Mac

Я использую AngularJS, и чтобы этот хак работал во всех случаях, мне приходилось называть это .hide().show(0) в каждом цикле дайджеста.

Взломать в виде директивы AngularJS:

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

Ответ 3

Если вы понятия не имеете, какие стили стилей и, следовательно, не могут использовать решение @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 к моему мачте, и он решил проблему для меня.