Fine increments in CSS Blur

I’ve got an image with a full range of values and set it to fade in and out by changing the opacity and blur. I’m seeing a big jump in the blur at the keyframes where the blur hits zero causing the whites to pop like a flashbulb. I’ve tried setting keyframes with tiny amounts of blur in close proximity to the “zero” frame but it appears that there is no increment between one pixel and one hundredth of a pixel.

Is there a fix for this or is this a limitation of the spec?

Do you mind attaching a small sample document that reproduces the issue?

When I experienced this, the 3px > 0px blur shifted smoothly from 3 to 1, stayed with a blur of 1 until the last frame then popped to 0. I tried shifting it manually by increments as small as .01px but the blur remained consistent with 1px until it hit the 0 keyframe. The sudden change of blur in high-contrast areas was what made the image seem to pop. (Note that the image was set to shift in transparency at the same time.)

Today I duped the scene and recreated the shift in blur, it is not producing the effect. I went back and recreated it in the original scene and the shift is smooth.

This is after having Hype up and running for most of the day and working on a number of items.

If this had happened with earlier versions of Photoshop (things suddenly not working properly after using the app all day) the official diagnosis would have been a memory leak. (1.6 MB)

Looks like a Brittany: Oops I did it again. I fired up Hype, opened the document, played with the blur and the issue had returned. The attached screen shots are of the final two frames of a two second shift from 3px blur / 20% opacity to 0px blur / 100% opacity. Because of the tiny blur percentage at the penultimate frame, the Blur field reads as 0px.

1 Like

Thanks for the details - I could reproduce this by looking at the iPad Portrait layout. This is a bug in the editor.

The bug comes from the fact that WebKit has two different rendering modes - a graphics accelerated path and non-accelerated path. The non-accelerated path has issues blurring less than 1px. If a scale is applied to an element then Hype will choose the non-accelerated path, as this method keeps text sharp. In your case it looks like you had scaled the image at some point and then changed back, but Hype kept it on the non-accelerated path. I can fix this in the next update.

The runtime does the logic slightly differently and so shouldn’t be an export issue.

1 Like