4

I am using transform:scale css property to scale an array of image and measure the performance in fps.

After measuring the performance, it was very slow. The result was only 20fps. After reading some tips on how to improve performance. Mostly they suggested not to use box-shadow for it is very heavy and can slow the performance. So, I set the box-shadow:none and measure the performance again. Unfortunately it gave the same results.

Out of curiosity I set box-shadow:1px 1px 1px black to check the performance. My expectation of the performance is it is slower cause box-shadow is present.

But after measuring the performance, it boosted from 20fps - 50fps. Any ideas as that what is the reason of this? I'm out of ideas.

Thanks.

Ronz
  • 41
  • 1
  • 6

2 Answers2

5

It can be, that something else gives you the measured performance of 20fps, also without box-shadow. After you gave some values to the box-shadow, the problem with the performance by using box-shadow occurs and it maked it slower than it was before...

Read here some good informations and ideas:

http://cubiq.org/performance-tricks-for-mobile-web-development

http://tobiasahlin.com/blog/how-to-animate-box-shadow/ (How to make box-shadow with smoother performance)

Also check the idea by using images instead of slow CSS-properties (screenshot from the first link - search "box-shadow"):

enter image description here

I hope, some of this ideas and infos will help you with your performance.

Cheers.

webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
2

I found that applying will-change: transform to the elements I'm transforming improved performance dramatically. I was seeing severe performance issues transforming elements with filter: box-shadow(...) applied, but adding the appropriate will-change properties resolved this almost instantly.

Luke Taylor
  • 8,631
  • 8
  • 54
  • 92