Bug 218895 - Opacity doesn't work on picture element if child img is display block
Summary: Opacity doesn't work on picture element if child img is display block
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-11-13 02:31 PST by James Long
Modified: 2020-11-18 10:24 PST (History)
6 users (show)

See Also:

Attachments
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 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>