CSS: Включение аппаратного ускорения Webkit отлично работает в Safari, запутывается в Chrome

Question

Я использую SVG clipPath с переменным размером, чтобы маскировать фиксированные позиции div с фоном изображения. Все это прекрасно работало (Firefox, Chrome, IE & Opera), пока не было указано, что он не работает в Safari. Через несколько часов я понял, что Safari применяет SVG clipPath к одному из трех разделов, которые он должен был использовать. Я отправил его на Bing и нашел this question, что по сути то же самое, но без ответа; просто комментарий, чтобы попытаться заставить аппаратное ускорение CSS (-webkit-transform:translateZ(1px)/-webkit-transform:translate3d(0, 0, 0)).

Я сделал это, и POW! он полностью работает для Safari ... но теперь выглядит совершенно испорченным в Chrome. Это как если бы перекраска полностью исчезла (я прокручиваю вверх и вниз, а искаженный, прерывистый эффект в Chrome каждый раз отличается).

Проблема заключается в том, что оба браузера Chrome & основаны на WebKit, поэтому я думаю, что префиксы поставщиков на самом деле не помогут мне здесь?

Для справки, вот как это должен выглядеть (скриншот из FF, в настоящее время выглядит одинаково в Safari):

А вот как это выглядит в Chrome с CSS аппаратное ускорение:

в идеале, мне нужно либо а) остановить ужасный вопрос перекрашивать в Chrome, или б) найти альтернативное исправление для clipPath не работает над несколькими элементами в Safari.

Answer 1

Хотя это немного Hacky, я нашел Chrome специфичный @supports запрос на BrowserHacks:

@supports (-webkit-appearance:none) { 
    #introwrapper .slide:not(:last-child) { 
     -webkit-transform:     none; 
    } 
} 

Этот @supports запрос предназначается только для Chrome> 28 и Opera> 14, и удаляет translate3d(0, 0, 0) преобразования, закручивал перерисовку Chrome, но сохраняет аппаратное ускорение CSS для Safari.