Behaviour on iOS and Safari

[AllanPooley]

Behaviour on iOS and Safari

[AllanPooley]

Hi Nigel,

For the mean time I have developed an inferior, dumbed down (removed functionality I have no use-cases for, such as angle-position-y) mixin that uses percentages instead of vw.

The behaviour is quite different from your mixin, but it seems to have solved my iOS / Safari woes.

@mixin primitive-angled-slant($angle, $angle-position-x) {
  $angle-percentage: 0%;
  @if $angle < 46 {
    $angle-percentage: calc(#{$angle} / 45 * 100%);
  }
  @if $angle > 45 {
    $angle-percentage: 0%;
    @error 'Invalid angle, it must be between 1-45';
  }

  @if $angle-position-x == 'left' {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% $angle-percentage);
    clip-path:  polygon(0 0, 0 , 100% 0%, $angle-percentage);
  }

  @if $angle-position-x == 'right' {
    -webkit-clip-path: polygon(0 0, 0 $angle-percentage, 100% 0);
    clip-path:  polygon(0 0, 0 $angle-percentage, 100% 0);
  }
}

[NigelOToole]

Hey

I cant seem to replicate the problem, would you be able to put a version up on something like codepen so I can inspect in?

[AllanPooley]

Hey @NigelOToole, sorry I didn't get back to you until today - we had the Queen's Birthday long weekend in Australia - God Save The Queen! 👸

I'll try spin something up today.

It could be an issue with the way I've applied your mixin.

Rather than clipping an element, I have an optional slant that can be appended onto the end of each block of page content (CMS controlled blocks - Headless WordPress). These optional slants are fixed height polygons.

[AllanPooley]

@NigelOToole https://codepen.io/allanpooley/full/aKJrRr/

[NigelOToole]

If you remove border-styles: block; from .slant-block .inner-slant.slant-right-to-left::before, .slant-block .inner-slant.slant-right-to-left::after it seems to fix the issue.

[AllanPooley]

Right! Would have never have found that. Thanks Nigel

[andrewjburnett]

I can't seem to get this to work on Safari either. Any help would be appreciated. Thank you!

[AllanPooley]

Hey @andrewjburnett, I believe Nigel has provided the fix for my particular issue. His library does work with Safari.

What might be your issue is that this mixin assumes that you'll be using an auto-prefixer in your sass build!

If you are using the sass with your own build configuration & don't want to include autoprefixer try adding -webkit-clip-path to any clip-path declarations.

For example:

-webkit-clip-path: polygon($clip-path-top, $clip-path-bottom);
clip-path: polygon($clip-path-top, $clip-path-bottom);

[NigelOToole]

Hey @andrewjburnett, did adding the -webkit work for you?