Ripple effect - border radius issue

Question

I have made the following animation:

If you have a big retina display (on small mac retina it's also bugged) - see that it looks pretty good, but if you take it to a non-retina display, it looks kinda blurry and rectangle-d instead of round cornered.

If you don't have retina display (or mac laptop) - you can use devtools and slow down the animations to 10% and see that it behaves correctly when slowed down, but on normal speed it looks different.

Update Problem appears to be mainly in Chrome, FF works well.

Brevity CSS:

.container {
  width: 700px;
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;

  .ripple-container {
    width: 100%;
    height: 100%;
    background-color: #F5B30C;
    position: relative;
    overflow: hidden;
  }

  .ripple {
    position: absolute;
    background-color: blue;
    top: 0;
    right: 0;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    transition: transform 1s;

    &.rippler-active {
      transition: transform 0.5s;
      transform: scale(500);
    }
  }
}

I had a similar issue, chrome seems to "optimize" edges in a weird way. it seems to fail to adjust border radius fast enough while transforming so it blurs it. I believe there is hacks or workarounds but I recommend using SVG. — Maher Fattouh, Mar 05 '17 at 09:00
BTW it's not your ripple-container that should have a background-color but it's parent, also, .... suddenly "rippler" R :D - Yeah, Chrome is a nasty browser at times... — Roko C. Buljan, Mar 05 '17 at 09:04
Yeah I mostly copy pasted form my project where there's some more complex logic, and this gets the point across so I kept it. Rippler sounds good doesn't it :) — Omri Aharon, Mar 05 '17 at 09:06
Yeah :D like Ripley :) from A L I E N, take a look at this: http://stackoverflow.com/a/37500979/383904 — Roko C. Buljan, Mar 05 '17 at 09:10
@RokoC.Buljan This could help I guess, but I have 2 issues with it - 1. it's using jquery/javascript, and I'm trying to keep it CSS only. 2. I need to use dynamic colors eventually (using classes switch to accomplish this), so I can't use the box-shadow like this unless I use JS. Hoping for a CSS solution, but barring one I could do some work on this to adjust. — Omri Aharon, Mar 05 '17 at 09:18
But your ripple starts unnaturally from some corner instead from where the click event happened... so you're gonna need JS and I mean real JS in that case, to help yourself you'll than most probably end up using jQuery and tiadaa... no more CSS dream :) — Roko C. Buljan, Mar 05 '17 at 09:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137261/discussion-between-omri-aharon-and-roko-c-buljan). — Omri Aharon, Mar 05 '17 at 09:22

score 1 · Accepted Answer · answered Mar 05 '17 at 09:46

Instead of scaling from 1 to 500 (which creates all sort of underground evil bugs)...
Scale from 0 to (say) 3, but than instead of setting the initial size to 0 (or 3px) you need to set to some huge size like 1400px.

A ripple of 1400px * 3 scale = means it can scale up to 4200px which is I think more than enough for any purpose:

var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');

el.addEventListener('click', function() {
  ripple.classList.toggle("ripple-active")
});

.container {
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
}

.ripple-container {
  width: 100%;
  height: 100%;
  background-color: #F5B30C;
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  background-color: #3f3fd8;
  top: 0;
  right: 0;
  height: 1400px;
  width: 1400px;
  /* Notice the size!! */
  margin: -700px -700px auto auto;
  /* and set here the desired offset */
  border-radius: 50%;
  transition: transform 2s;
  transform: scale(0);
}

.ripple.ripple-active {
  transition: transform 2s;
  transform: scale(3);            /* 1400 * 3 !!! yey */
}

<div class="container">
  <div class="ripple-container">
    <div class="ripple"></div>
  </div>
</div>

Another idea is to make the ripple 150% the width of the container - and make it square (height=width). but than you'll most probably have to fix issues on non-horizontal elements (where height > width) - and logically on mobile... — Roko C. Buljan, Mar 05 '17 at 09:52

Ripple effect - border radius issue

1 Answers1