WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
158421
Toggling display: none on a parent element of a slot which shares style with its parent doesn't update the slot's visibility
https://bugs.webkit.org/show_bug.cgi?id=158421
Summary
Toggling display: none on a parent element of a slot which shares style with ...
Paul Kinlan
Reported
2016-06-06 08:31:53 PDT
Created
attachment 280594
[details]
actual results - slotted elements are not rendered. I think I have found an issue with Shadow DOM and slotted elements not displaying in WebKit. I have a <slot> whose parent is hidden (display: none) and toggled later (display:block). When toggled, the elements that are distributed into the <slot> are not rendered. You have to force a layout/paint via devtools (toggle :active for example) for it to render the distributed elements. It looks like that WebKit is making an optimization where it knows initially the distributed elements are not visible so it doesn't layout the elements, however it doesn't then realise that the parent has been made visible so it doesn't force a layout and render of the elements. Demo:
https://jsbin.com/cebura/latest
Smallest test case:
https://output.jsbin.com/jusuga/latest
Expected: click the toggle button in Chrome canary with Experiemental web platform features enabled and you will see the distributed h1 is rendered Actual (WebKit): click the toggle button, nothing rendered. Go to devtools and for a layout (I click :active on the slot and you will see it render)
Attachments
actual results - slotted elements are not rendered.
(128.37 KB, image/png)
2016-06-06 08:31 PDT
,
Paul Kinlan
no flags
Details
Smallest test case
(1.05 KB, text/html)
2016-06-06 08:34 PDT
,
Paul Kinlan
no flags
Details
Expected results
(316.24 KB, image/png)
2016-06-06 08:34 PDT
,
Paul Kinlan
no flags
Details
Reduction
(761 bytes, text/html)
2016-06-06 13:36 PDT
,
Ryosuke Niwa
no flags
Details
Adds a test
(2.74 KB, patch)
2016-09-27 18:32 PDT
,
Ryosuke Niwa
no flags
Details
Formatted Diff
Diff
Show Obsolete
(3)
View All
Add attachment
proposed patch, testcase, etc.
Paul Kinlan
Comment 1
2016-06-06 08:34:13 PDT
Created
attachment 280595
[details]
Smallest test case H1 should display when the toggle is clicked.
Paul Kinlan
Comment 2
2016-06-06 08:34:40 PDT
Created
attachment 280596
[details]
Expected results
Ryosuke Niwa
Comment 3
2016-06-06 13:36:40 PDT
Created
attachment 280625
[details]
Reduction
Ryosuke Niwa
Comment 4
2016-06-06 13:37:39 PDT
Toggling the class name on #container doesn't dirty the slot (FAIL shows up). <div><div id="container"><slot name="green">FAIL</slot></div></div> It works if we remove the outer-most div.
Ryosuke Niwa
Comment 5
2016-06-20 10:03:51 PDT
Looks like
http://trac.webkit.org/changeset/202227
didn't fix this bug.
Ryosuke Niwa
Comment 6
2016-09-27 17:28:42 PDT
https://trac.webkit.org/changeset/206403
fixed this bug. Let's add a test.
Ryosuke Niwa
Comment 7
2016-09-27 18:32:03 PDT
Created
attachment 290045
[details]
Adds a test
Ryosuke Niwa
Comment 8
2016-09-27 19:45:01 PDT
Comment on
attachment 290045
[details]
Adds a test Thanks for the fast review!
WebKit Commit Bot
Comment 9
2016-09-27 20:06:01 PDT
Comment on
attachment 290045
[details]
Adds a test Clearing flags on attachment: 290045 Committed
r206493
: <
http://trac.webkit.org/changeset/206493
>
WebKit Commit Bot
Comment 10
2016-09-27 20:06:06 PDT
All reviewed patches have been landed. Closing bug.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug