0

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
  );
}
Improve this question
2
  • 1
    Apply this style only on larger screen sizes. Mobile devices run on much smaller processor budgets.
    – Martin
    Commented Apr 21, 2023 at 8:32
  • @Martin not an option really, as it's a key element of company's branding. Also, I wouldn't consider it visually advanced/complicated effect. It's very simple when we look at it, so I would consider this a CSS flaw. I think I'll try to rebuild it using some inline SVG/masking... no idea yet how exactly.
    – kacpergalka
    Commented Apr 21, 2023 at 8:58

1 Answer 1

Reset to default
2

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

transform: translate3d(0, 0, 0);

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.