search

v-trof / Ripple.js

Proper Material Design ripple effect for the web, that wouldn't interfere your elements' DOM.
17 stars 0 forks source link

Wrong positioning with a 100vh div and a fixed div #14

Closed itayganor closed 7 years ago

itayganor commented 7 years ago

Hey again :)

I'm building a new site and I have a weird problem:

**** ( a page that only demonstrates the problem )

Try clicking the Plus floating button at the bottom. the ripple isn't quite right with its positioning. I did some tests, and It was fixed when I did each of the following modifications (not all of them at once, but one by one):

  1. I added overflow-y: scroll; or overflow-y: hidden; to body.

  2. I changed main's height from 100vh to any other height.

  3. I changed right: 1em; to left: 1em; for the floating button.

The thing is, I need these property as they are to present my website properly. Do you know why does it happen, and how can I solve it?

Thank you very much! I appreciate your help :)

Edit: I added some tabs elements inside the blue header, which have the same ripple behavior. When you click the ripple is not positioned correctly (the pink indicator shows the tab's width, as you can see it does not fit the ripple's width).

v-trof commented 7 years ago

Hi, You are an using old version.

Make sure it's v0.4.3

(it has that 100vh fix)

itayganor commented 7 years ago

Thanks!