Bug 158181 - -webkit-backdrop-filter blur rendering issue with css animation
Summary: -webkit-backdrop-filter blur rendering issue with css animation
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-05-28 08:10 PDT by Liam DeBeasi
Modified: 2019-05-15 06:20 PDT (History)
3 users (show)

See Also:

Attachments
Source code (145.47 KB, application/zip)
2016-05-28 08:10 PDT, Liam DeBeasi 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2016-05-28 08:10:50 PDT 
Created attachment 280040 [details]
Source code

Given a container of width < 100%, an overlay with -webkit-backdrop-filter: blur() applied, and an element underneath the overlay with a CSS animation applied, triggering that animation causes rendering distortion to occur. While this issue can be reproduced when other backdrop-filters are applied, it is most prominent with blur().

Example: http://liamdbz.com/webkit
Source files with reproduction attached.

OS: OS X 10.11.5
Safari: 9.1.1