NEW218895
Opacity doesn't work on picture element if child img is display block 
https://bugs.webkit.org/show_bug.cgi?id=218895
Summary Opacity doesn't work on picture element if child img is display block
James Long
Reported 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/
Attachments
Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 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.
Radar WebKit Bug Importer
Comment 2 2020-11-18 10:24:50 PST
<rdar://problem/71545258>
Ahmad Saleem
Comment 3 2026-01-23 20:06:08 PST
https://jsfiddle.net/maoue9t6/ <- Above seems to have broken Image URL, so I updated it from same domain (random image) and Safari Technology Preview 235 + Chrome Canary 146 works same. Might be already fixed? @Karl - can you double check?
Note You need to log in before you can comment on or make changes to this bug.