218895 2020-11-13 02:31:15 -0800 Opacity doesn't work on picture element if child img is display block 2026-01-25 15:57:11 -0800 1 1 1 Unclassified WebKit Images WebKit Nightly Build Unspecified Unspecified RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=287407 InRadar P2 Normal --- 1 jameslong webkit-unassigned ahmad.saleem792 karlcow koivisto sabouhallawa simon.fraser smoley webkit-bug-importer zalan oldest_to_newest 1707173 0 jameslong 2020-11-13 02:31:15 -0800 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/ 1707526 1 ap 2020-11-14 11:52:22 -0800 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. 1708657 2 webkit-bug-importer 2020-11-18 10:24:50 -0800 <rdar://problem/71545258> 2174684 3 ahmad.saleem792 2026-01-23 20:06:08 -0800 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? 2174873 4 ahmad.saleem792 2026-01-25 02:11:36 -0800 It seems Safari 26.1 does not get opacity on `<picture> with opacity of 0.5 and display:block on the <img>.` but Safari Technology Preview 235 does. So something recently progressed. 2174959 5 zalan 2026-01-25 15:57:11 -0800 This has progressed with [block-in-inline].