Bug 188259 - Toggling "display: contents" to "display: none" fails to hide the element
Summary: Toggling "display: contents" to "display: none" fails to hide the element
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 11
Hardware: All All
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-08-02 08:25 PDT by Daniel Sieradski
Modified: 2019-03-25 11:28 PDT (History)
14 users (show)

See Also:

screenshot of bug (669.26 KB, image/png)
2018-08-02 08:25 PDT, Daniel Sieradski
no flags Details
Reduction (261 bytes, text/html)
2019-03-18 14:17 PDT, Ryosuke Niwa
no flags Details
Even simpler reduction (207 bytes, text/html)
2019-03-18 14:25 PDT, Ryosuke Niwa
no flags Details
patch (3.15 KB, patch)
2019-03-25 03:06 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews202 for win-future (12.92 MB, application/zip)
2019-03-25 04:58 PDT, EWS Watchlist
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Sieradski 2018-08-02 08:25:04 PDT
Created attachment 346382 [details]
screenshot of bug

I have an element that's default setting is "display: none;".

When the page first loads, it is properly hidden.

Then, using a JavaScript click event, the element style is changed to "display: contents;", showing the hidden content.

Clicking a close button should re-hide the content with an event that removes the "display: contents;" from the element style, returning it to its default state of "display: none;".

This works properly in Firefox and Chrome on desktop and iOS.

However in Safari on desktop and iOS, as well as Chrome on iOS, when you click the close button, WebKit properly removes "display: contents;" and returns to the state of "display: none;" but the element itself that should be hidden still appears on screen.

In the attached screenshot, you will see that the element highlighted in the devtools elements pane ("#award--body") is shown as "display: none;" in the styles panel, but still appears on screen.

You can see the bug in action here: https://youtu.be/B9fJP4BoijU.
Comment 1 Daniel Sieradski 2018-08-02 08:28:39 PDT
The URL where you can tinker with this is:
Comment 2 Daniel Sieradski 2018-08-02 08:30:25 PDT
Sorry, I meant to write, "This works properly in Firefox and Chrome on desktop." It also works in Edge.
Comment 3 Daniel Sieradski 2018-08-02 19:46:46 PDT
This appears to be specifically related to the use of "display: contents;". If I switch it to "display: block;" then it works fine.
Comment 4 Saam Barati 2018-08-02 21:19:19 PDT
Hi Daniel, thanks for the bug report. I’ve CCd some folks who should be able to figure out what’s going on
Comment 5 Simon Fraser (smfr) 2018-08-02 21:28:52 PDT
display:contents bug.
Comment 6 Radar WebKit Bug Importer 2018-08-02 21:29:24 PDT
Comment 7 Antti Koivisto 2018-08-03 05:08:38 PDT
I can't reproduce with that page, it doesn't appear to use display:contents. Daniel, do you have a test case for this?
Comment 8 Daniel Sieradski 2018-08-07 07:56:26 PDT
Sorry, once I figured out a fix, I had to implement it. I can put a rolled-back version up on a staging server if you only need it for a little bit.
Comment 9 Simon Fraser (smfr) 2018-08-07 10:47:45 PDT
Please do (or make a small test case if you can).
Comment 10 Eloy Duran 2018-11-12 06:23:59 PST
You can find a reproduction here https://codepen.io/alloy/pen/rQWmYG. Resize the width of the window to see that on Safari all elements stay visible, once visible. On Chrome only 1 element is visible at a time.
Comment 11 Eloy Duran 2018-11-12 06:30:25 PST
Btw, I’m seeing this on Safari 12 and the TP build of November 7th.
Comment 12 Ryosuke Niwa 2018-11-12 15:54:37 PST
Yeah, I can reproduce the problem now.
Comment 13 Eric Gao 2019-03-17 00:30:23 PDT
Any progress on this? I have made a CodePen with a far simpler test case. https://codepen.io/ericxgao/pen/dreqWp

Go in and inspect the text in Safari 12 - changing the class from "contents" to "hide" does nothing.
Comment 14 Ryosuke Niwa 2019-03-18 14:17:34 PDT
Created attachment 365065 [details]
Comment 15 Ryosuke Niwa 2019-03-18 14:25:17 PDT
Created attachment 365066 [details]
Even simpler reduction
Comment 16 Antti Koivisto 2019-03-25 03:06:30 PDT
Created attachment 365857 [details]
Comment 17 EWS Watchlist 2019-03-25 04:57:49 PDT
Comment on attachment 365857 [details]

Attachment 365857 [details] did not pass win-ews (win):
Output: https://webkit-queues.webkit.org/results/11659182

New failing tests:
Comment 18 EWS Watchlist 2019-03-25 04:58:00 PDT
Created attachment 365859 [details]
Archive of layout-test-results from ews202 for win-future

The attached test failures were seen while running run-webkit-tests on the win-ews.
Bot: ews202  Port: win-future  Platform: CYGWIN_NT-6.1-2.10.0-0.325-5-3-x86_64-64bit
Comment 19 WebKit Commit Bot 2019-03-25 11:28:03 PDT
Comment on attachment 365857 [details]

Clearing flags on attachment: 365857

Committed r243444: <https://trac.webkit.org/changeset/243444>
Comment 20 WebKit Commit Bot 2019-03-25 11:28:06 PDT
All reviewed patches have been landed.  Closing bug.