| Summary: | inherit value of visibility property does not work when both the parent and child node have visibility keyframe animation | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Abhishek kumar <abhishek0687> | ||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED CONFIGURATION CHANGED | ||||||
| Severity: | Major | CC: | ahmad.saleem792, ap, bfulgham, dino, graouts, rniwa, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | PC | ||||||
| OS: | Windows 7 | ||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=251433 | ||||||
| Attachments: |
|
||||||
I am still able to reproduce this bug in Safari 15.5 on macOS 12.4. Safari matches Firefox Nightly 103 behavior where Blue rectangle does not disappear while red works as described in Expected Result. In case of Chrome Canary 104, it syncs and both disappear same time. It seems to be fixed in WebKit ToT (260520@main) using mini-browser, while broken in Safari 16.3 and Safari Technology Preview 163. Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks! Thanks for catching this Ahmad. Indeed, this progressed with 259631@main, the fix for bug 251433. |
Created attachment 195847 [details] TestCase - The visibility property is inherited during the animation The visibility property of the parent during its keyframe animation is not inherited by its children(also having visibility keyframe animation). As per the standard when the "visibility" is set to "inherit" the "visibility" property will be set as its parent. While for the other cases when the parent have "visibility" animation and the child does not have any "visibility" animation and vice versa, the value is inherited properly. Attached is an experiment and the explanation is below ------------------------------------------------------- <div id="d1"> is the parent div having a red rectangle which have visibility keyframe animation which makes the child visible for 1s and then invisible for the next 1s. <div id="d2"> is the child of the <div id="d1"> having a blue rectangle which has a visibility keyframe animation to make it behave like its parent by using the inherit value in the visibility property. Expected Result --------------- The canvas(red rectangle) under <div id="d1"> is on for the first 1s and then off for the next 1s. Then after the end of the animation i.e after 2s it is visible. The canvas(blue rectangle) under <div id="d2"> behave as the above canvas i.e it will be on for the first 1s and then off for the next 1s, then after the end of the animation i.e after 2s it is visible. Result Seen ----------- The canvas(red rectangle) under <div id="d1"> behaves as expected. The canvas(blue rectangle) under <div id="d2"> is always on and does not become hidden after 1 second, means it did not inherit the visibility property from parent