sirxemic / jquery.ripples

Add a water ripple effect to your background using WebGL.
https://sirxemic.github.io/jquery.ripples/
MIT License
1.06k stars 417 forks source link

Incorrect size/position when background-size is 'contain' #59

Open Leftium opened 5 years ago

Leftium commented 5 years ago

Live demo: https://ripples-bug.glitch.me/ (Resize so window is much wider than tall)

Expected: Ripples canvas should be square Actual: Ripples canvas is rectangular

If Ripples is disabled, the background image is square, and rendered as a square as a result of background-size:contain. However, the Ripples canvas is sized to the full geometry of its parent element.

(Is this the "TODO: background-clip" from the source?)


I quickly hacked my own version of Ripples that forces the canvas to be a correctly positioned square during initialization and updateSize(), but it would be nice to have a general fix.