Re: [css-image] gradients, animations and photosensitive epilepsy

On 28/05/2011 6:45 AM, Tab Atkins Jr. wrote:
> On Fri, May 27, 2011 at 1:38 PM, Brian
> Manthos<brianman@microsoft.com>  wrote:
>> For the general problem, perhaps a "human sensitivity" attribute in
>> the rendering UA could be established as an Accessibility feature.
>>
>> When that attribute is set to some specific value, perhaps
>> gradients and other features could be muted or otherwise adjusted
>> to mitigate the seizure risk.
>>
>> Alan raised the concern about the separation between stops, but I
>> suspect quick switches in colors as well as animation and
>> transition rates are of concern as well.  Perhaps the Moire'
>> patterns (http://en.wikipedia.org/wiki/File:Moir%C3%A9.gif) of
>> radial gradients are also a concern.


That is not soothing. Ouch.


>> In retrospect, I'm somewhat surprised this issue hasn't been raised
>> before.
>
> Yes, this seems like the sort of thing that is completely in the
> hands of the UA to do if they wish, considering the many places where
> the problem could potentially occur.  To do this "right", you have to
> not only vet all the gradients, but process all other images, looking
> for a sufficient density of contrast-switches.
>
> ~TJ


Apart from a user perspective, I also see this from an author 
perspective. This gradient does nothing special,

   background: repeating-radial-gradient(black 93px, white 93px, black 
100px);


but an author who may be susceptible to photosensitive epilepsy may 
decide to add one extra ingredient.

   background: repeating-radial-gradient(black 93px, white 93px, black 
100px);


Just a simple load and view may induce a seizure. Another test using the 
above two gradients.

http://css-class.com/test/css/3/gradients/repeating-radial-gradients-danger2.htm


Now just talking about the later gradient. Firefox has trouble showing 
the gradient correctly. You must adjust the width of the viewport to 
make it sharp. Chrome shows the gradient differently (much harder on the 
eye).

Now if you put both gradients from each browser side by side. By moving 
one viewport around will produce a spinning sensation in the gradient 
but this also has the same affect with the gradient in the other 
browser. One viewport is moving and one is static but both gradient 
produce a spinning sensation for each gradient.

I do believe that some types of gradients and some animations need to be 
somewhat vetted. A gradient that may seem benign at first glance can 
cause contrast switches when you just move the viewport. Gradients using 
mixed percentages, with or with background-size can cause a Moiré affect 
simply by adjusting the width of the viewport.



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Saturday, 28 May 2011 07:19:19 UTC