ios - How to hardware accelerate a box-shadow animation in CSS? -


i animating on box-shadow css. using instruments program, discovered animation alone taking 35% of cpu on ios safari! iphone become hotter , hotter when leave page running. if comment out animation, cpu usage normal. how can hardware accelerate animation not strain cpu?

css glow

jsfiddle: http://jsfiddle.net/tokyotech/tutlh/

@-webkit-keyframes pulseglow {     0% {         box-shadow: none;     }     10% {         box-shadow: 0 0 1.4em rgba(255,0,0,1),             0 0 1em rgba(255,0,0,1) inset;         border-color: rgba(255,0,0,0.5);     } }  #recordbutton {     display: block;     width: 5em;     height: 5em;     background: salmon;     border-radius: 50%;     -webkit-animation: pulseglow 1s ease-in-out 1s infinite; }

the short answer browser decides on when use hardware acceleration render something; it's not can force on particular class or style. can use css properties more have browser use hardware acceleration on it, example -webkit-transform: translate3d (even if performing 2d transform on page) , -webkit-transition.

see article notes list of hardware accelerated properties.

as particular animation problem, i'm not sure how you'd able repeating transition occur without user interaction or using javascript (alone or in addition css). while can have -webkit-transition: box-shadow, i'm not sure how go repeating pulse animation since transition run when property value changed.


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more