Safari рендеринга ошибка с CSS "клип"

Question

У меня есть следующие проблемы с Safari: http://cl.ly/ZlJ8

LiveDemo: http://drpdev.de/labs/example.html

полный исходный код: http://jsfiddle.net/uqsghon7/

<div class="row"> 
    <div class="rowcontainer"> 
    <div class="side"> 
     ... 
    </div> 
    </div> 
</div> 
... (multiple times with different contents in .side) 

и стиль:

.side { 
    height: auto; 
    padding-left: 50px; 
    margin: auto; 
    position: fixed; 
    top: 50%; left: 0; bottom: 0; 
    width: 350px; 
    ... 
} 
.row { 
    ... 
    position: relative; 
    overflow: hidden; 
} 
.rowcontainer { 
    position:absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    padding: 0; 
    margin: 0; 
    clip: rect(0, auto, auto, 0); 
    overflow:hidden; 
} 

Он отлично работает в Chrome и d Firefox. Прежде чем я попытался достичь этого только с фиксированной позицией внутри (относительный позиционированный) div (без второго контейнера) и переполнением скрылся, и он работал во всех браузерах, но не в Firefox, поэтому мне пришлось сделать это обходное решение с помощью css-clip ... Он фактически работает и в Safari, но кажется, что движок рендеринга Safari не освежает вид при прокрутке ...

Любые идеи?

Answer 1

Очень интересно.

Я думаю, что нашел ответ, но он включает в себя только взломанный webkit. Это меня немного пугает, но, надеюсь, это все еще подходит для законопроекта.

Выкапывание для проблем с отсечением/отрисовкой, я наткнулся на вопрос о том, что касается background-position and fixed-position elements. Ответ указан -webkit-mask-image в качестве альтернативы только для веб-китов clip: auto.

Он работает для вас, слишком просто добавив следующий CSS делает Safari счастливым:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .rowcontainer { 
    clip: auto; 
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) 
    } 
} 

Вот fiddle и working model.

Признаюсь, я действительно не понимаю почему он работает. Но он также работает в Chrome и Firefox.

IE9, однако, действительно недовольны этим. IE11 показывает содержимое divs, но пропускает большую часть своего фона. Стоит рассмотреть ...