so I'm trying to cast a shadow onto a non-rectangular object in a png file with transparency. That works so far, but when I try to add a transition effect on hovering over the image, the filter seem to max out their set value and then quickly bounce back to the actual set value when the timer from the transition feature is up. I'm running Chrome 28 Mac but also appears on Safari.
I have demonstrated this effect here:
http://jsfiddle.net/dbananas/3pMS8/
transition: all 0.2s ease-in-out;
-webkit-filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.9));
Recommendations anyone who to fix this and make the transitions smooth?
Thanks,
db
I'd check to see if this works and happens in Firefox. If I had to guess, I'd say it's a bug in Webkit (checking in Firefox can help confirm that it's a browser bug and not a bug in your code). You can file a bug report for it here: https://bugs.webkit.org/
That said, in order to work around it, you might have to reconsider how you're going about solving your problem.
For example, if you're doing it for text, you can use the text-shadow property, which is animatable.
If it's an actual image, you could resort to making a "shadow image" that you could fade the opacity on (if you're using this on a content image), or swap to (if you're swapping background images).
Edit I found this tutorial, which may be of use to you. It's an image cross-fade effect, like what I previously suggested. It has a few different variations (including a pure CSS one), so you can probably adapt it to make it work for you. Basically, you add a background to the img, then fade in/out the img element itself to create the effect. I'd agree that it's not ideal (your -webkit-filter technique is arguably superior, if it worked properly in the browsers).
That does look like a bug. It looks like the shadow radius is being treated differently while the animation is in progress (and accelerated filters are applied). I've logged this for Chrome as http://crbug.com/266957
As a workaround, you can apply -webkit-transform: translateZ(0) to the element with the shadow, which will force it to always be accelerated.
Related
There appears to be a bug in the behavior of backdrop-filter: blur() on both Chrome and FireFox browsers (at least on Mac OS). This problem is not present on Safari.
Video of bug
I have created a CodePen demo of this problem:
https://codepen.io/beefchimi/pen/vYjmQKO
Scenario
ElementA is a <img />.
ElementB is a <div /> that overlaps ElementA (via grid, or position, etc... exact layout doesn't appear to matter).
ElementB applies a backdrop-filter: blur(10px).
The parent wrapper of these elements has an opacity value below 1.
Problem
The moment the shared parent of these elements drops its opacity, the backdrop-filter: blur() effect does not render correctly. It still applies a blur... but that blur appears to lose intensity the closer it gets to the edge of the underlying element. In other words, the edge of the underlying visuals appear crisp, while further from the edge becomes blurry.
This problem goes away the moment you apply a fully-opaque background style to the parent.
Requirements
In my specific use-case, I cannot apply a background style to the parent. The underlying page uses a background-image that I do not want to conceal.
Questions
Is there any clever trick to getting this blur effect to work as desired?
Have I got something obvious wrong in my CodePen demo?
Is this a legitimate bug in the implementation of backdrop-filter: blur(), and should it be reported to all affected browsers?
Thank you in advance for any assistance.
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 a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.
Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:
How to force re-render after a WebKit 3D transform in Safari
http://duopixel.com/stack/scale.html
I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!
eg of transition code:
-moz-transform:scale(1.05,1.05);
http://jsfiddle.net/VcVpM/1/
While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.
.cta:hover {
width: 500px;
height: 500px;
font-size: 400%;
}
The only other work-around "might" be to use animation #keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.
I found this on CSStricks.com:
It appears if you set your transforms to also use
translate3d( 0, 0, 0)
it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2
I use Jquery and needed my slider's H3 tags to be fixed. Larger text wasn't blurry for me.
I wrote the line
$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px");
and that fixed it best for me. I needed the -webkit- in front of my transform. I don't know why, as others said not to use it. I uploaded an image of the way it looked with some different settings.
When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy.
Note: This only happens on Retina-Displays — no problem at all with 'normal' ppi-displays, but fuzzy on for example a new MacBook Pro with Retina Display.
My CSS (without vendor-prefixes):
img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}
Note: to see the effect/bug, I've set the transition-duration to 2 Seconds
Check out my Demo: http://jsfiddle.net/dya2t/7/
How can I fix this?
EDIT: If I set the :hover-state to filter:none its sharp! :-) BUT of course the transition does not work anymore :-/
As soon as there is a filter on an image (even if the value is 0 or 0%), the image gets fuzzy on retina displays (with or without transitions … its just blurry, all the time). I guess this is a Filter-Bug.
This is a known Bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471
I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0);
http://jsfiddle.net/78qbn/3/
Child elements with -webkit-backface-visibility: hidden; will resolve this.
http://codepen.io/amboy00/pen/Bxbrd
Joined stackoverflow to let others know since I had to find this out myself:
this bug also manifests (but differently) when trying to print images in chrome. They turn super pixelated!
If you throw a -webkit-filter onto a PNG in chrome regardless of printer or print settings, it prints the image/s at the right size, but downsampled to under 70 dpi. It's visible in the print preview too.
-webkit-transform: translateZ(0); fixed it.
Meatspace repro: prints of same stack of PNGs with & without fix
I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.
Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)
.test {
-webkit-transform: translate3d(0px, 100px, 0px);
}
.testInner
{
/*-webkit-transform: scale(1.2);*/
-webkit-transform: scale3d(1.2, 1.2, 1);
text-align: center;
}
<div class="test">
<div class="testInner">
This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
</div>
</div>
Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.
Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.
See here:
http://jsfiddle.net/SfKKv/
Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.
I found that using:
-webkit-perspective: 1000;
on the container of your font or icon set kept things crisp for me after experiment with the issue on Android nexus 4.2 for sometime.
A css filter effect is a graphical operation that allows to manipulate the appearance of any HTML element. Since Chromium 19 these filters are GPU accelerates to make them super fast.
CSS3 introduces a bunch of standard filter effects, one of them is the blur fitler:
-webkit-filter: blur(radius);
The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.
Set the radius to 0 will force browser to use GPU calculation and force it to keep your html element unchanged. It's like applying an "hard edges" effects.
So the best solution for me in order to fix this blurry effect was to add this simple line of code:
-webkit-filter: blur(0);
There is also a known bug that only affects retina screens. (See here: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). So in order to make it works also for retina, I recommend to add this second line:
-webkit-transform: translateZ(0);
Try this
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Or for a more exact approach you can call a javascript function to recalculate the transformation matrix by removing the decimal values of the matrix. see: https://stackoverflow.com/a/42256897/1834212
I came across this issue when using the isotope plugin (http://isotope.metafizzy.co/index.html) in combination with the zoom plugin (http://janne.aukia.com/zoomooz/). I built a jquery plugin to handle my case. I threw it up in a github repo in case anybody could benefit from it. - https://github.com/charleshimmer/jquery-hirestext.
I used javascript to move the text 1px top and then with 100ms after, back 1px down. It's almost unperceptive and solved the problem completely cross-browser.
body {
-webkit-font-smoothing: subpixel-antialiased;
}
or I think you could put that on a specific element, but I was having problems with one element affecting the whole site.
I think it is a problem with custom font-face fonts.
Webkit treats 3d transformed elements as textures instead of vectors
in order to provide hardware 3d acceleration.
This has nothing to do with it. You'll notice that your aliasing problem can be fixed with the addition of duration and direction information (e.g. 0.3 linear). Your having a mare trying to render everything at runtime:
Same for the above ^