RESOLVED CONFIGURATION CHANGED287407
opacity is not inherited from an inline parent with a block child 
https://bugs.webkit.org/show_bug.cgi?id=287407
Summary opacity is not inherited from an inline parent with a block child
roseate.loris-2q
Reported 2025-02-10 07:47:05 PST
Just like the title says.. Check the following code: <a href="#" style="opacity: 0.5;"><div>Not translucent</div></a> <a href="#" style="opacity: 0.5">This one is</a> Version 18.3 (18620.2.4.111.8, 18620) Also happens iOS 18.3 Tried in chrome and firefox, none have this problem.
Attachments
Reference Screenshot (Safari, Firefox and Chrome) (580.88 KB, image/png)
2025-02-10 08:13 PST, Ahmad Saleem 		no flags
Details
testcase (1.08 KB, text/html)
2025-02-17 18:53 PST, Karl Dubost 		no flags
Details
rendering in safari, firefox, chrome (1.29 MB, image/png)
2025-02-17 18:55 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2025-02-10 08:13:39 PST
Created attachment 474178 [details] Reference Screenshot (Safari, Firefox and Chrome)
Radar WebKit Bug Importer
Comment 2 2025-02-17 07:48:17 PST
<rdar://problem/144985085>
Karl Dubost
Comment 3 2025-02-17 18:53:38 PST
Created attachment 474257 [details] testcase I found a couple of previous bug about the relations in between parents and children with regards to the opacity. I will be adding them to seeAlso: Bug 73161 Bug 129480 Bug 184915 Bug 218895 This issue seems to have existed for a long time. But this is happening in an inline parent / block children relationship.
Karl Dubost
Comment 4 2025-02-17 18:55:19 PST
Created attachment 474258 [details] rendering in safari, firefox, chrome These are the rendering on Safari Technology Preview 213 20621.1.11.111.1 Firefox Nightly 137.0a1 13725.2.13 Google Chrome Canary 135.0.7020.0 7020.0
Karl Dubost
Comment 6 2025-02-17 19:18:16 PST
@roseate Does it affect a live website you would be working on?
roseate.loris-2q
Comment 7 2025-02-18 04:55:35 PST
@karl(In reply to Karl Dubost from comment #6) > @roseate > Does it affect a live website you would be working on? First of all thanks for taking the time to look at such minuscule bug. Xd And no, it doesn’t affect my website anymore. I had to change the logic of my code in order to get the desired effect. Basically I used divs with flex instead of spans.
roseate.loris-2q
Comment 8 2025-02-18 07:24:18 PST
(In reply to roseate.loris-2q from comment #7) > @karl(In reply to Karl Dubost from comment #6) > > @roseate > > Does it affect a live website you would be working on? > > First of all thanks for taking the time to look at such minuscule bug. Xd > And no, it doesn’t affect my website anymore. I had to change the logic of > my code in order to get the desired effect. Basically I used divs with flex > instead of spans. Sorry, after taking a look at my code, that's not what I actually did. I instead set the position of the child div as 'absolute' and aligned it where I wanted. Something like this: <a href="#" style="opacity: 0.5;"><div style="position: absolute; top: 30px">Now it's translucent</div></a> <a href="#" style="opacity: 0.5">This one is</a>
Ahmad Saleem
Comment 9 2026-01-23 16:40:44 PST
I am not able to reproduce this bug anymore on Safari Technology Preview 235. @Karl - can you double check? @Roseate - if you can also try as well?
alan
Comment 10 2026-01-24 13:59:58 PST
This has progressed with block-in-inline work.
roseate.loris-2q
Comment 11 2026-01-26 02:27:41 PST
(In reply to Ahmad Saleem from comment #9) > I am not able to reproduce this bug anymore on Safari Technology Preview > 235. @Karl - can you double check? > > @Roseate - if you can also try as well? Same in Release 234 (WebKit 21624.1.6.19.3) Thanks!
Note You need to log in before you can comment on or make changes to this bug.