Image Property 'all' giving Deprecated API warning (video and canvas too)

Published: November 7, 2022

This article covers why giving giving the all property to images will result in the following errors:

Chrome DevTools: Specifying overflow: visible on img, video and canvas tags may cause them to produce visual content outside of the element bounds. See https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md.

Lighthouse: Uses deprecated APIs

All of these properties will give the error above:

1img {
2    all: inherit;
3    all: initial;
4    all: revert;
5    all: unset;
6}

Why? Because specifying the overflow propety on images has been deprecated, as in the past it has been causing too many unwanted results. It should no longer be used. The attribute all changes all of the element's attributes, including the overflow one. As the overflow gets changed, the deprecation warning appears.

Solution? I tested many workarounds, and the only one that worked was to not use the all attribute on image elements at all. So just go through your properties one by one instead of targeting them all at once.

The same error will appear when you use all on video and canvas elements too. So all of these will give the same warning:

1video {
2    all: inherit;
3    all: initial;
4    all: revert;
5    all: unset;
6}
7
8canvas {
9    all: inherit;
10    all: initial;
11    all: revert;
12    all: unset;
13}

Same fix works for them too: don't use the all property for videos and canvases.