CSS blend-mode действительно GPU, потребляющий

Я работаю над сайтом, который использует слои с режимом наложения наложения. Эти слои перемещаются для создания эффекта градиента на фоне. Я использую анимацию CSS для получения рендеринга GPU для них, но это довольно тяжело, и я могу слышать вентилятор с моего компьютера каждый раз, когда сайт открыт и отображается.CSS blend-mode действительно GPU, потребляющий

Я не знаю, как я мог бы улучшить характеристики, чтобы уменьшить эту проблему перегрева. Вы можете мне помочь?

Здесь заинтересованная часть сайта:

HTML

<div class="backgroundTransparent"> 
    <img id="img1" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_1.png') }}"> 
    <img id="img2" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_2.png') }}"> 
    <img id="img3" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_3.png') }}"> 
    <img id="img4" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_4.png') }}"> 
    <img id="img5" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_5.png') }}"> 
    <img id="img6" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_6.png') }}"> 
</div>

CSS

@keyframes move { 
    from { 
     transform: translateX(0); 
    } 

    to { 
     transform: translateX(20%); 
    } 
} 
.transparent_background { 
    height:100%; 
    width: 100%; 
    position: absolute; 
    transform: translateZ(0); 
    mix-blend-mode: overlay; 

    animation-duration: 3s; 
    animation-name: move; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
}

Вот ссылка на сайт, как это в настоящее время, если это возможно Помощь: http://brunobosse.wiboyd.fr:8080

Также может быть важно отметить, что без ове rlay blend mode, выступления намного лучше. Возможно ли улучшить режим наложения наложения?

источник

2017-02-02 Arnaud Miguet

Насколько велики изображения, которые вы трансформируете? Попробуйте заменить PNG-изображения на SVG-изображения? –

Изображения около 100 КБ, я попробую с SVG и меньшими –

Немного не по теме, но я бы не назвал это проблемой перегрева, если ничего плохого не произошло. Поклонники, вращающиеся во время интенсивного материала, - это нормальное поведение. Есть ли какая-либо фактическая видимая потеря производительности в вашей анимации? – Roope

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

источник

2017-02-02 14:30:58

CSS blend-mode действительно GPU, потребляющий

ответ

Смежные вопросы