This HTML5/CSS theme works perfectly from desktop and also in mobile version always from desktop browser, but there is a lag during transitions on mobile browser (tested with chrome and firefox).
Someone can help me to improve the CSS ? I've tested many solutions, like enabling hardware acceleration with transform css propriety, but nothing seem to working.
This is the theme: https://html5up.net/uploads/demos/dimension/
Without digging too deeply into it, the lag when clicking the menu items is caused by transitioning the blur filter on that big background image. It's just an inherently expensive operation, and it's combined with transitioning the scale transform as well.
There are some tricks in this area, such as switching in a low-res, up-scaled image for the blur, but they are really hacks - the short answer is, if you need smooth transition performance, don't animate filter on complex elements, and definitely don't animate combined filters and other operations at the same time.
As a quick fix, find the body.is-article-visible #bg:after section in the stylesheet, and remove the transform: scale(); lines so that the background is only blurring, not blurring and scaling:
body.is-article-visible #bg:after {
-moz-filter: blur(0.2rem);
-webkit-filter: blur(0.2rem);
-ms-filter: blur(0.2rem);
filter: blur(0.2rem);
}
That makes a big difference to performance on my machine.
Related
I have an element with a -webkit-filter: blur(10px); applied to it. I'm using a CSS animation to move the element up and down with it's translateY property. When the element is animating or transitioning the blur remains but the edges become hard. When the animation or transition ends the the edges become blurred again like they're suppose to. I made a demo that shows examples of the notes that follow it.
Demo: http://jsbin.com/bofahekuko/1/edit?html,css,output
I Tried Fixing it With:
adding -webkit-font-smoothing: subpixel-antialiased; to the animating element.
forcing hardware acceleration on the animating element and adding backface-visibility: hidden on the parent
Things of Note
Happens with both CSS transitions and animations
If you move the element up and down via the CSS top property the blur filter renders correctly.
Browser Testing
Bug appears in Google Chrome (running Version 50.0.2661.86 (64-bit)) as well as in Canary.
Both Firefox and Safari (iOS and Desktop) correctly render the blur filter during the animation.
I'd really like to be able to run the animation with the translateY transition property instead of the top property. If there really isn't a fix it'd still be interesting to know what exactly is going on here to cause the problem.
Thanks in advance for any help on this.
This is a problem that's probably caused by hardware accceleration - the GPU is just moving the original blurred content without updating its background.
To fix, don't use translate or use another trick to disable hardware acceleration (like simultaneously animating margin or padding)
I have this example : http://jsfiddle.net/ruchan/8efhk9f5/
I want to make the background(only) of the blocks blurred.
using
filter: blur(5px); makes whole content around it blurred.
Tried using it inside :beforebut still doesn't works
How do i only blur the background, and leave the content un-blurred.
There is a proposed CSS mechanism to do this in the draft version of the filters spec, but it's not implemented in any browsers yet (that I'm aware of) (edit: implemented in WebKit nightlies now, and supposedly is in Mobile Safari iOS 9). For future readers of this answer, this may be a viable solution.
It looks like this:
.thing {
background-image: filter(url('myimage.png'), blur(10px));
}
So, basically it's a functional notation that lets you apply a filter to an image as you load it.
Again, this is not supported anywhere as of right now.
The example from CSS Tricks mentioned in another answer uses a pseudo-element to basically create a duplicate of an element using the same background, and then blurs that with a filter. That should work as a realistic solution today (at least for browsers that support CSS filters - don't forget the -webkit- prefix as well as the unprefixed version!), otherwise you'll have to fall back to a manually created blurred image.
I'm working on an animation using packery. Tiles are aligned in a grid and clicking on one is supposed to enlarge it and dynamically rearrange the tiles accordingly. The resizing is animated using CSS3 transitions. All of this works as expected in IE10 and Firefox, as demonstrated in the following codepen: http://codepen.io/anon/pen/ilkmK
The same code in WebKit-based browsers (tested on Windows) produces a frantic wiggle / shaking of the box as it is resized and repositioned.
I already submitted an issue and the problem seems to be that width and height transitions in WebKit are not optimized. Implementing the same animation using jQuery.animate improved the situation a little bit, but it doesn't get rid of the wiggle. Especially on slower systems it remains very noticable.
For now I'm using the JavaScript version as a slightly better fallbackf or webkit browsers, but it's not optimal. I have no idea where to go from here, so I was hoping Stackoverflow could help me out.
For any hints on how to make this work in Chrome/Safari, I'd be very grateful.
I just tried this in Chrome on mac and it's working fine, so I can't replicate the problem. However I have a feeling this might be to do with the fact that when webkit browsers load a page they initially generate images with 0 dimensions.
Try putting your jQuery in $(window).load(function(){ instead of $(document).ready(function(){
That would wait for images to load before executing the script.
I have a page that uses a number of simple animations, including some JavaScript animations that add/remove CSS classes to elements with CSS3 animations for rotations. I am not using canvas.
On the PC, the page looks great in Chrome/Safari, Firefox, and IE, but on Macs, a number of elements are completely missing on the page when it is viewed in WebKit (Chrome, and Safari 5.0.3). It looks fine in Firefox on Mac. The missing elements don't have any animations applied to them -- I don't see any connection between them and the animations.
The page validates, the CSS nearly validates except for the vendor extensions and the zoom property in my clearfix. Disabling all of the JavaScript on the page doesn't change anything. The missing elements are in the source, they are just not visible on the page.
At first glance, it looks like the Z-indexes have gotten screwy on the invisible elements. Changing these doesn't affect the problem though. Removing all of the absolute, relative, fixed positions, as well as floated elements in the entire document doesn't affect the problem. The only action that does anything, is removing all of the Webkit animations.
And when I apply all of the animations, nearly everything on the page disappears!
Here is an example of one of my animations -- simple stuff:
#-webkit-keyframes propeller {
0% {-webkit-transform: rotateX(90deg);}
50% {-webkit-transform: rotateX(1deg);}
100% {-webkit-transform: rotateX(90deg);}
}
#element {
-webkit-animation:propeller 1s linear;
-webkit-transform-origin:50% 50%;
}
Even if the animation is not called, simply the presence of the keyframes causes the page to break.
If I use this animation in particular (just the -webkit- vendor prefix), it causes a large form to vanish that is a sibling of the great-great ancestor of "#element."
Here is a link to the page I'm working on. I had nothing to do with the design:
http://goo.gl/6XXcV
All of the animations are contained in animations.css and all the JavaScript animations are in general.js.
This has been very slow-going for me since I don't have a Mac -- I'm just using Microsoft Expression Web 4 SuperPreview -- but my client has a Mac and is not impressed. Thanks in advance for any advice.
I just pulled up the site in Chrome for mac and Firefox for mac (versions 22.0.1229.94 and 14.0.1 respectively) and aside from a couple spacing differences (which are minor) the look the same. The only odd thing I see is the light blue background showing up next to all the graphics if your window is narrow enough to warrant (the seemingly needless) horizontal scroll.
What exactly is missing?
For the most part, the trouble turned out to be from bugs in Microsoft Expression Web 4 SuperPreview with their Mac/Safari 5.0.3 emulator service. When any -webkit- vendor prefixes are used for CSS3 animations, it causes elements seemingly unrelated to the animations to behave as if they have visibility:hidden.
The similar problems with the disappearing elements first reported by my client using an actual Mac with Chrome seem to be from a bad .svg font conversion that was being used with #font-face. Although the svg font was rendering on Mac/Webkit, it appeared to be destroying styles on elements in which it was used as well as parent elements. When I converted the font once more to svg using a different conversion utility, the problem resolved. Weird.
As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.
When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.
I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):
Toggle Control on its own > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html
Combined with other elements > http://ben-major.co.uk/labs/iPhone%20UI/
I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test?
Any advice and comments welcome.
You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:
-webkit-transform-style: preserve-3d;
To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.
If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:
-webkit-transform: translate(100px, 100px)
becomes:
-webkit-transform: translate3d(100px, 100px, 0px)
You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#
If after applying this to the element, you see it or elements around it blink upon use, then use:
-webkit-backface-visibility: hidden;
To the element, and that should correct the problem.
These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)
Chrome has recently improved the 2D transition performance, and now this trick is no longer needed. The best thing is that if removed the translate3d you'll no longer have those z-index problems! Use the test to prove. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/
also you can try will-change: transform; , read more about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility
I think it quite old already but for anyone who still needs tricks to improve the transition performance on mobile device, you can apply :
-webkit-transform: translateZ(0);
to the element you are animating.
This trick is according to this blog : http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/.
I have tried and it works quite well.