Ripple problems on Chromium and Webkit browsers

plasmatech8 commented 1 year ago

Hi,

Thanks for making this package.

1. Ripple Effect Disappearing Problem on Chromium

On Chromium (on my MacOS + Android device), the ripple effect breaks/disappears due to CSS transition statement not working with opacity.

See the video below:

https://github.com/Posandu/svelte-ripple-action/assets/40431112/375a0112-8f05-42bc-92d7-787783059723

This appears to be due to Chromium browsers not recognizing the transition CSS for opacity.

That is, this does not work:

    -webkit-transition: 0.6s;
    transition: 0.6s;

Instead you need to use:

    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;

2. Ripple Effect Overflow Problem on Webkit

On Webkit/Safari (MacOS), the overflow: hidden does not work properly once the ripple expands to full size.

See the video below:

https://github.com/Posandu/svelte-ripple-action/assets/40431112/b5455752-e678-44b0-b022-06a7591deaea

I don't know why this is happening. Maybe it is just Safari being Safari.

This can be fixed by adding:

.ripple {
-webkit-transform: translate3d(0, 0, 0);
/*. .. */

Which is solution from: https://stackoverflow.com/a/16681137

Example

I have been using this package for my attempt to make a Material-like theme for Skeleton UI. Which requires a material ripple.

(https://github.com/plasmatech8/skeleton-material-theme)

I have copied this library into the src/lib/svalte-ripple-action subfolder of this repository with the modification mentioned above - and I can confirm that it works after the change.

Other Comments

Also, while I am here, here are some minor suggestions:

Changing the default ripple color to transparent currentColor (based on text color). i.e.

.ripple {
background-color: var(--ripple-color, color-mix(in srgb, currentColor 28%, transparent));
/* ... */

Small linting issues like "use const instead of let" and add /* eslint-disable @typescript-eslint/no-explicit-any */ to allow any types.

Posandu commented 1 year ago

Hey @plasmatech8

Thanks for creating this issue,

- oh, It's a silly mistake I've done. But I think some browsers support using transition: 0.2s which converts to transition: all 0.2s automatically.
- Did you try manually adding the ripple-effect class to the element where there is use:ripple? If that button rerenders immediately after clicking, It may remove the class I guess. If not, might be a Safari bug because I wasn't able to reproduce it on another browser.

Changing the default ripple color to transparent currentColor (based on text color).

That's a great suggestion. Will add it.

Small linting issues like "use const instead of let" and add / eslint-disable @typescript-eslint/no-explicit-any / to allow any types.

Will do.

plasmatech8 commented 1 year ago

Thanks @Posandu.

Removing the Skeleton class .btn from my button fixes the overflow issue for me. :O

However, I don't know what exactly is causing the problem. I assumed that it was related to Safari not handling overflow + border radius properly as mentioned in the StackOverflow answer and also in a Apple forum.

...for my app anyways, I will stick to -webkit-transform as a quick fix.

CSS for Skeleton .btn class...

```css .btn { font-size: 1rem/* 16px */; line-height: 1.5rem/* 24px */; padding-left: 1.25rem/* 20px */; padding-right: 1.25rem/* 20px */; padding-top: 9px; padding-bottom: 9px; white-space: nowrap; text-align: center; display: inline-flex; align-items: center; justify-content: center; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-radius: var(--theme-rounded-base); } .btn > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem/* 8px */ * var(--tw-space-x-reverse)); margin-left: calc(0.5rem/* 8px */ * calc(1 - var(--tw-space-x-reverse))); } .btn:hover { --tw-brightness: brightness(1.15); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .btn:active { --tw-scale-x: 95%; --tw-scale-y: 95%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-brightness: brightness(.9); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .btn:disabled { cursor: not-allowed !important; opacity: 0.5 !important; } .btn:disabled:hover { --tw-brightness: brightness(1); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .btn:disabled:active { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } ```

Edit:

Actually, this might be the problem.

Overriding this CSS variable causes the overflow issue for some reason...

    --tw-brightness: brightness(1) !important;

Posandu commented 1 year ago

That's some interesting behavior because --tw-brightness has nothing to do with this library. 😅 Is this occurring only on Safari?

plasmatech8 commented 1 year ago

Yeah, only on Safari. Not Firefox or Chrome. Seems strange - I guess it must be relate to how Safari handles filters with overflow?..

Posandu commented 1 year ago

Also, in your https://github.com/plasmatech8/skeleton-material-theme library, It seems that the ripple is shifted to the right of the clicking position a bit. Did you change some other code? Because I'm not sure whether it's an issue with this library or with your library.

Edit: seems like this is causing the issue. Not a problem with this library.

.btn>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right:calc(.5rem * var(--tw-space-x-reverse));
  margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

plasmatech8 commented 1 year ago

Thanks! Good spotting, lol. I did not even realize that the position was offset slightly. I'll have to take a look tomorrow.

Posandu commented 1 year ago

Fixed https://github.com/Posandu/svelte-ripple-action/commit/9d7a9542b39e5aab0ea4f331f63307ebdb3a8363

Posandu / svelte-ripple-action