I have a long transform:translate transition on my website (the position bar for an audio player). The reason I chose to set a css transition for this is because this is the smoothest way (instead of js animation).
When I open the developer window during transition, the transition jumps to the final state (so the transition is gone). I'm sure this is one of the many problematic Chrome rendering quirks but I'm looking for the best way to solve this. Or is it unsolvable?
On request I can provide a code example.
Related
I do not know how it has happened, because it worked properly at some point, but after doing some changes, I think to the main scroll container layer of the page, this started happening.
It is a weird visual glitch, I am not able of reproducing it, all that I can say is that the transition is a CSS transition with transform: translateX() and that while the transition is running both elements (new and old) get an absolute position that its remove once the animation ends. Also, there aren't any text-shadows in place.
I does not happen in firefox nor in chrome mobile, and it does not happen always, depends on if I have or not the developer tools opened, I think it might be because of the change in viewport resolution when those are open.
I have this issue as well;
fiddle
Seems it has to do with multiple layers of nested animations.
Its a bit to complicated to outline here!
I've been unable to solve stuttering in Chrome/Opera when using transitions - e.g. opacity, transform, filter etc.
For simplicity, I will focus on opacity.
Live example here:
http://www.lydkontoret.dk/index.php?pgId=20&pgName=Lyd+%26+lys
When you click on one of the pictures below the banner, a large version is displayed. I do this by adding a fullscreen div on top of page to prevent access to page elements. The div is faded in via transition on opacity. On top of this div is added further divs that holds the image.
Notice the opacity transition for the fullscreen element when clicking on a picture. On a 24" monitor with browser window maximized, chrome/opera stutters like crazy, while firefox/msie/msedge is reasonably smooth.
To complicate matters, Chrome/Opera performs ok when browser window is smaller - as rendering engine apparently is able to cope.
I've tried using will-change and translateZ(0) on the various elements involved, but chrome just doesn't care (removing the banner helps a lot - as expected, because the rendering engine then has less to deal with).
Also it's mostly the fade in that stutters. When closing the image display, transition on fullscreen element back to fully transparent often looks acceptable.
I figure my coding is ok, as Firefox etc. do the various transitions nicely. So why the problem with the blink engine used by chrome and opera?
Any thoughts??
I have encountered a few sites, now, that take advantage of CSS3 keyframe-style animation, and decided to test it on my own sites. However, this leads me to a conundrum: Usually before I commit a CSS file to the site, I'll use the browser's inspector (Ctrl+Shift+I on Chrome, Opera, and FF; F12 in IE) to tweack and change the CSS locally to see what I like best. However, it appears there's no way to change the keyframes of a CSS3 animation with the browser inspector! This is an extreme hinderance to me, as it forces me to commit a CSS file every time I want to change any nuance of the animation, which also comes with up to a 15-minute delay from the server. Is there any way I can locally change CSS3 animation keyframes with the browser inspector?
Since Chrome 50 it's now finally possible to edit CSS keyframes.
https://twitter.com/ChromeDevTools/status/694966453376675840
Huzzah hoorah and hooray! It's completely possible today! Chrome Dev Tools added an Animation tool! Just open up the dev tools and click the "More Tools" button, then "Animations", and a whole suite of cool tools are available for debugging animations 😄
On Chrome:
- Ctrl+Shift+I
- Choose an element
- right column: click on the css-link (for example style.css:24)
- Now you can edit your css-file
Notes:
- You can't edit css in the right column and in the css-file at the same time
- To retrigger the animation, remove -webkit-animation:... and add it back
If you want even more control, download Chrome Canary (64bit required I believe). There is a little 'play' button and a time adjustment so you can slow down the animation and pause it whenever you want. Pretty cool!
Instructional video
Soon it will be, through the Chrome Dev Tools' Animation Timeline.
So far there's only this teaser video: https://www.youtube.com/watch?v=U9xfYbKxosI
It took a while to get this on Chrome since most options have been moved or changed.
This is the way to get it on chrome in 4 steps illustrated on the screenshot below :
On Firefox (developer edition), there is a conspicuous Animation Tab as shown below:
I've got a background image that changes to another image when :hover.
I used transition to show this effect.
When transition finishes my old image reapears using the same transition when loses focus (Not hover).
Please see a working example (use chrome) :
http://jsfiddle.net/WZqrY/3/
My problem:
The second transition effect does not apears when I take out the mouse half way into the first transition. You can try this moving the mouse into the image for one second and then moving it out of the image. How can I make this go smoothly?
Note: When I use colors instead of an image this effect does work in the way I pretend.
The background image transitions seem to be an unplanned "side effect" that's not fully functional and have a very limited support amongst the browsers
"This only works on Chrome 18+ and on Webkit Nightlies built in 2012 onwards. It seems to be a side effect of the CSS4 crossfading work" - source
For now your better bet will be the "2 images in a container" solution - http://jsfiddle.net/WZqrY/4/
This will work in all browsers that support transitions.
In Webkit, will a 3D CSS transform set to repeat indefinitely, continue even when it or a parent element is hidden from view by styling (CSS)?
The reason I ask is that I am seeing unexpectedly high CPU usage on a page I am developing.
If anyone knows a good way to diagnose this issue (for example visualizing where CPU cycles are going on a page, as opposed to a blanket CPU usage per tab), I would be very grateful.
Anecdotal evidence (removal of the hidden CSS animation) would suggest that the animations do run in the background. Does anyone know how to prevent this?
In chrome 16.0.912.75, at least CSS animations appear to continue even when the element is set to visibility:hidden;. Setting display:none appears to resolve the issue.
you can debug this kind of situation with the developer tools
chrome / safari right click inspect element.
Go to the timeline tab and click on record, after that you can see what the browser is doing internally.