Bug 218895

Summary:	Opacity doesn't work on picture element if child img is display block
Product:	WebKit	Reporter:	James Long <jameslong>
Component:	Images	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	koivisto, sabouhallawa, simon.fraser, smoley, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified

Description James Long 2020-11-13 02:31:15 PST

If a picture element is given an opacity, the opacity is applied. However, if the picture element has a child img element that has display:block, the opacity isn't honoured unless the picture element has display:block as well.

Expected behaviour: the opacity should be applied even with a display:block child.

This affects Opera, Chrome and the latest version of Edge. It doesn't affect pre-webkit Edge and it doesn't affect Firefox.

You can see this bug in this fiddle: https://jsfiddle.net/Skateside/k6zbeq1j/

Comment 1 Alexey Proskuryakov 2020-11-14 11:52:22 PST

The report doesn't explicitly mention WebKit, but I can reproduce in Safari indeed.

Changing a behavior where we match Chrome can have negative compatibility effect of course.

Comment 2 Radar WebKit Bug Importer 2020-11-18 10:24:50 PST

<rdar://problem/71545258>