Bug 287407

Summary: opacity is not inherited from an inline parent with a block child
Product: WebKit Reporter: roseate.loris-2q
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Minor CC: ahmad.saleem792, bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
URL: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13490
See Also: https://bugs.webkit.org/show_bug.cgi?id=73161
https://bugs.webkit.org/show_bug.cgi?id=129480
https://bugs.webkit.org/show_bug.cgi?id=184915
https://bugs.webkit.org/show_bug.cgi?id=218895
Attachments:
Description Flags
Reference Screenshot (Safari, Firefox and Chrome)
none
testcase
none
rendering in safari, firefox, chrome none

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>
Note You need to log in before you can comment on or make changes to this bug.