Search code examples
cssperformancesassclip-path

Using clip-path on mobile ruins the performance

I apply clip-path (code below) on multiple elements on the site (it basically cuts the corner of each rectangle box/button/image so they become octagons).

On desktop it works great, but it completely ruins scrolling performance on mobile (it makes the whole container repainted on every animation frame during the scroll?).

Is there a way to fix that while keeping clip-path (or something similar) or I need to find another way (any ideas how to apply such effect)?

enter image description here

@mixin clip($size) {
  clip-path: polygon(
    $size 0%,
    calc(100% - $size) 0%,
    100% $size,
    100% calc(100% - $size),
    calc(100% - $size) 100%,
    $size 100%,
    0% calc(100% - $size),
    0% $size
  );
}
Solution

  • Ok, hard to believe, but this oldschool trick did the job for this issue as well! Solved.

    transform: translate3d(0, 0, 0);