search

sirxemic / jquery.ripples

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

Mobile behavior. #47

Closed kazu44t closed 6 years ago

kazu44t commented 6 years ago

Hello.Thank you very much for this cool plugin. Currently, I added this plug-in on my website and now it works on desktop. However, ripple does not work on mobile. Do you know the cause?

environment: ios 11 (iphone SE)

The website is developed using WordPress. https://endorphins.tokyo

Thank you in advance.

sirxemic commented 6 years ago

One thing I notice is that your HTML is invalid: right before the <title> tag there are non-breaking whitespace characters, which the browser interprets as body content, moving everything after it into the body. Basically it says ...></script>\n\n \xa0 \xa0<title>Endorphins... - note the \xa0. It's invisible, though, so I can understand that you didn't see it. Not sure if that's the cause of the bug though, and if it isn't, then read on:

Instead of setting the background on the <body> and applying the effect to that, could you try out setting the background on the <div class="l-header"> element and applying the effect on that?

kazu44t commented 6 years ago

Thank you for your response. I was aware of this space, but I did not know the cause of how this space is being generated, I coped with it simply by putting font - size: 0; in body 's CSS. I will investigate the cause again. If I set it to l-header, the effect will be applied but margins will appear on the left and right. 2018-02-05 9 50 26

kazu44t commented 6 years ago

I'm sorry I reply continuously. The matter of the space was fixed. I set up the hook wrong. I tried to fix this, but the effect was not applied on mobile. Also, setting it to l-header class did not apply the effects on the mobile as well. It would be appreciated if you could come up with another solution and share it. Thank you.

wm370857724 commented 6 years ago

This plugin use some webgl2.0 api like bindBuffer,safari in iOS don't support until now.

sirxemic commented 6 years ago

@wm370857724 The plugin works just fine on iOS 11. I don't know what's breaking it in this specific case, though.

kazu44t commented 6 years ago

thank you for your comment. I tried to change the plugin version from 0.6.1 to 0.5.3, then I found that the effect is applied to mobile. I can not clarify which code relies on its cause.

sirxemic commented 6 years ago

Your comment gave me new insights: I never updated the demo page to use the latest version. I assumed wrongly that if the demo page was working fine, then the latest version should work as well.

Should be fixed now!