-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Animated in wkwebview does not rotate #365
Comments
I am having this issue as well using wkwebview on iOS 12.1.2 . I noticed that when I quit my cordova app fully and then bring it back, it will rotate normally. However, if I put the app into the background, and then bring it back, the spinner won't rotate. You just see the background of the spinner doing nothing... Really weird. I just upgraded to the latest and still the same bug. Same issue with and without hwaccel. Any ideas of what we can try? |
Does the issue occur with spin.js 3.1? Versions 2.x and 4.0 use CSS keyframe animations, while 3.x uses You could also try adding your own infinite CSS animation and see if that exhibits the same issue. If so, this is likely a limitation/bug in iOS or Cordova rather than a problem specific to spin.js. |
Yes, I am using the 3.x version. After the app is switched back from the background to the foreground in wkwebview, the animation will not rotate. However, I solved the problem after rewriting the rotation animation myself; the following is my code: @-webkit-keyframes lds-spinner { var viewPetals = ""; for (var i = 0; i < petalSum; i++) { viewPetals += viewPetal; } run = run.replace("[content]", viewPetals); root = root.replace("[content]", run); $(target).html(root); obj = $("#" + id + "_spin_root"); obj.css({ "display": "flex", "justify-content": "center", "align-items": "center", "width": "100%", "height": "auto", "box-sizing": "border-box" }); var rW = (petalRadius * 2 + internalRadius) * 2; var rH = (petalRadius * 2 + internalRadius) * 2; var pW = petalRadius * 2; var pH = petalRadius * 2; var pTop = (rH - pH) / 2; var xOffset = (rW / 2); var yOffset = (rH / 2) - pTop; var originTran = xOffset + "px " + yOffset + "px"; console.log("originTran:" + originTran); console.log("rW:" + rW + ",rH:" + rH + ",pW:" + pW + ",pH:" + pH + ",pTop:" + pTop + ",xOffset:" + xOffset + ",yOffset:" + yOffset); $(".lds-spinner").css({ "position": "relative", "width": rW + "px", "height": rH + "px" }); $(".lds-spinner div").css({ "left": "0px", "top": pTop + "px", "position": "absolute", "width": pW + "px", "height": pH + "px", "border-radius": "50%", "background": color, "transform-origin": originTran, "-webkit-transform-origin": originTran }); var rotateIncrement = 360 / petalSum; console.log("spin rotateIncrement:" + rotateIncrement); var timeIncrement = 1 / petalSum; console.log("spin timeIncrement:" + timeIncrement); for (var i = 0; i < petalSum; i++) { var index = i + 1; var deg = (rotateIncrement * index) - rotateIncrement; var time = (timeIncrement * index) - 1; time = time.toFixed(2); console.log("deg:" + deg + ",deg time:" + time); $(".lds-spinner div:nth-child(" + index + ")").css({ "transform": "rotate(" + deg + "deg)", "-webkit-transform": "rotate(" + deg + "deg)", "animation": "lds-spinner linear 1s infinite", "-webkit-animation": "lds-spinner linear 1s infinite", "animation-delay": time + "s", "-webkit-animation-delay": time + "s" }); } } function stop() { if (obj != null) { obj.remove(); obj = null; console.log("spinLoading stop"); } } } |
@theodorejb Oh man, I am using a very old version. It doesn't even have a version. Just: |
@fgnass @theodorejb I am looking to upgrade to the latest Any thoughts on how I might modify the old jquery interface to work with the new
|
@benmcmaster I think you would have to replace |
@theodorejb Ah cool. Thanks! I actually ended up just setting |
under certain circumstances,Animated in wkwebview does not rotate
The text was updated successfully, but these errors were encountered: