Replace clip with clip-path property

[RibbtDev]

Hi team,

The .sr-only and .sr-only-focusable classes need to be updated to use clip-path property instead of the old deprecated clip property.

According to MDN web docs, the CSS property clip has been removed from the Web standards.

The same result is achievable with

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: circle(0% at 50% 50%);
  white-space: nowrap;
  border: 0;
}

@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

View Demo here on jsfiddle

Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

[Lausselloic]

hello,

Already tried to update but there's a refresh on Chrome see issue #24906
On sr-only there's also another issue : #25686

Don't check if repaint on chrome have been fixed?

[ffoodd]

FWIW it was merged in #22154 and removed in #25197.
I don't know if the perf issue caused by overflown clip-path in Chrome for Android has been fixed…

[dosentmatter]

I tried the codepen mentioned in #24906 on Google Chrome Version 75.0.3770.100 (Official Build) (64-bit) and don't see any flickering.

I turned on "Paint flashing" after going to "Rendering Settings"

clip-path isn't fully supported on caniuse though.