I am working on a cordova android application, and would like to display some sort of loading message/spinner while the user's notifications are being loaded as there is a bit of a wait while the DOM is being painted with all the notifications.
We currently use the cg-busy directive in a few places to display spinners during wait times while ajax calls are being completed. However in this case, cg-busy doesn't accomplish what we want as the ajax call is very quick and it is the painting that is taking a long time.
So my question is this: is there some way to get cg-busy to display its spinner while the DOM is being painted or if not, is there something similar we could use to display a spinner during the paint?
What I did is showing a simple CSS animation until angular is done initializing. There are lots of plain CSS loading animations out there, you can just google some. I'll use one of those for this example.
So how does this work? I'm adding following div to my html:
<div class="loadingAnimation" ng-show="::false"></div>
And also following CSS:
.loadingAnimation {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #3b454b;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
#-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
#keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
Once angular is done initializing it will evaluate the ng-show and hide the loading animation. The :: are just a performance improvement.
I'm not 100% sure if that's the behaviour you want, so you might want to tweak on the condition for ng-show. But I hope you got the idea.
Related
I've been trying to fix this bug for days, yet I didn't find a single solution.
On certain levels of zoom (even on my phone with default zoom) I can see grey borders below some divs. I've been trying to fix this with A LOT of options including:
box-shadow
margin-bottom
outline: none
... and some other ones which I don't even remember anymore
The issue can be seen here.
PICTURE LINK
It's visible on the top of the triangle.
The whole code is available here:
https://noobish.eu/beta/
I went through your website (BTW great design) and i think i figured out a solution for your issue. You need to add a negative margin to the triangle to cover the space:
.white_triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 130px 50vw 0 50vw;
border-color: white transparent transparent transparent;
margin-top: -5px; /* Here's the addition */
}
Update:
The margin-top solution seems to be buggy, so I found another solution, which would require adding a before element on top of the border. Here's the code:
.white_triangle_container:before {
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #fff;
margin-top: -4px;
border-radius: 0 0 50% 50%;
}
This is how it looks: https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png
I am trying out a very simple CSS animation using Ionic Framework and it works fine in Chrome browser but on device there is no animation. And the shape also looks different. Here's my code. Can anyone suggest what's wrong with it?
.container {
text-align: center;
padding:100px;
}
.wedge {
animation: rotate 4s infinite linear;
border-radius: 0 64px 64px 0;
background: green;
width: 32px;
height: 64px;
transform-origin: 0% 50%;
}
#keyframes rotate {
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
Here's the HTML
<div class="container">
<div class="wedge"></div>
</div>
All it does is rotate a wedge 360 degress. But not working on android device. Thanks.
You need to define your animations to support default Android browser. for example replace #keyframes with
#-webkit-keyframes
, animation with -webkit-animation , transform with -webkit-transform and so on.
It fixed mine and I hope fixes yours.
I'm trying to create a scrolling effect for a background using CSS3 animations, such as:
body {
background: url("bg.jpg") repeat-y 0 0;
animation: animatedBackground 50s linear infinite;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
(JSFiddle)
This works great, except that it's very laggy on mobile devices (e.g. Android Chrome 43.0)). I've tried various hacks that are suppose to force the browser to use the GPU, which sadly didn't help.
One solution is to use translateY and duplicate the image, like shown here. That doesn't feel very good however, since the image is pretty big to start with. It does run smooth, though.
I'm looking for alternate solutions on how to make this run smooth.
The reason that transform runs smoothly while background-position does not is that transform can utilize the phone's hardware acceleration while background-position must rely on the browser software's re-rendering of the element. Even if it's a large image, using hardware acceleration is always better for mobile.
If it's the same image, any browser worth it's salt isn't going to incur any extra impact by using it twice, as it's cached after the first pull.
So use the transform solution, and feel confident it's the right one.
Inspired by the link in the OP, I found a way to achieve this without having multiple references to the same image. It does, however, require you to know the image's height.
The general idea is to have a relative wrapper which hides all overflow, and force the image to be 200% its height, and make it repeat and finally animate the y-axis -100%. Example:
#parallax-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallax-background {
position: relative;
width: 100%;
height: #parallax-image-height * 2;
background: url("/bundles/sunnerbergsimilarseries/images/tv-show-wall.jpg") repeat 0 0;
animation: animatedBackground 50s linear infinite;
transform: translate3d(0, 0, 0);
}
#keyframes animatedBackground {
0% { transform: translateY(0) }
100% { transform: translateY(-#parallax-image-height) }
}
(JSFiddle)
The above runs as smooth on a 2015 Android-phone as on a computer with a dedicated graphics card.
I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.
Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.
It works fine on all other mobile and desktop browsers I tested on.
I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?
Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/
The minimal test case:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Css:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
UPDATE: It looks like the problem is solved in Firefox 27.
After a lot of searching I found a workaround here:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
Adding a background and opacity: .99 to the container element seems to solve the problem.
But still no information about what causes the problem
I tried the opacity: .99 hack but it was causing the layout to get pushed down..
so i tried another hack which i find that worked by applying this to your style sheet:
* {
outline: 1px solid transparent;
}
I'm sorry, but I seems found a more simple solution.
Without layout damage.
If scrolling container has height a more over than device height then this issue disappearing.
It's has a different values for portrait and landscape orientation.
It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/