Mobile behavior.
Closed this issue · 7 comments
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.
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?
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.
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.
This plugin use some webgl2.0 api like bindBuffer,safari in iOS don't support until now.
@wm370857724 The plugin works just fine on iOS 11. I don't know what's breaking it in this specific case, though.
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.
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!