De-selecting "content" property on a pseudo-element causes the pseudo-element to disappear
Reported by
impressi...@gmail.com,
Jun 18 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36 Steps to reproduce the problem: 1. Inspect an element that includes a pseudo-element using the "content" property 2. In the "styles" panel of the developer tools, de-select the "content" property to disable it 3. Try to re-enable the "content" property What is the expected behavior? The "content" property should be disabled and the pseudo-element should disappear from the page. However, the "content" property should still be listed in the list of styles to allow it to quickly be enabled again for debugging purposes. What went wrong? The "content" property disappears completely and is no longer listed in the "styles" for the element. Thus, there is no way to re-enable the pseudo-element without refreshing the page. Did this work before? No Chrome version: 67.0.3396.87 Channel: stable OS Version: 10.0 Flash Version: I understand the concept behind why this happens (i.e. the "content" is essentially the element itself, thus removing it should remove the styles too), but for debugging styles related to pseudo-elements, this is a very inconvenient behavior. In Firefox's dev tools, for example, you have the option to re-enable the "content" property instantly, with no page refresh. This should be the behavior with Chrome as well. To do a quick test, here's a JS Bin demo that has a :before pseudo-element on the body element: https://jsbin.com/yavuho/edit?html,css,output And please note that this is not a "bug", so there's no need for a reduced test case. The above JS Bin should suffice to demonstrate the problem.
,
Jun 19 2018
Issue 853750 has been merged into this issue.
,
Jun 20 2018
Unable to reproduce the issue on Win-10 using chrome reported version #67.0.3396.87 and latest canary #69.0.3465.0. Attached a screen cast for reference. Following are the steps followed to reproduce the issue. ------------ 1. Inspected the "Example text" from url: https://jsbin.com/yavuho/edit?html,css,output 2. In the "styles" panel of the developer tools, de-selected the "content" property to disable it. 3. Tried to re-enable the "content" property. 4. Observed that the "content" property is still listed in the list of styles to allow it to quickly be enabled again for debugging purposes. reporter@ - Could you please check the attached screen cast and please let us know if anything missed from our end. Also please check the issue on latest canary #69.0.3465.0 by creating a new profile without any apps and extensions and please let us know if the issue still persist or not. Thanks...!!
,
Jun 20 2018
Thanks for the feedback. In order to see this happen, you have to drill down to select the actual pseudo-element in the "elements" panel. In your example, you're selecting only the "body" element. I've attached a screencast to demonstrate. So I suppose one way around this is to not select the pseudo-element (as you did in your video) which I never realized I could do. Still seems odd that the styles completely disappear, along with the pseudo-element when the pseudo-element is selected in the "elements" panel before disabling the "content".
,
Jun 20 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 23 2018
This happens because pseudo elements gets destroyed as soon as you remote the "content" property. We can probably make checkbox next to "content" property non-toggable in case of pseudo elements.
,
Jun 23 2018
> We can probably make checkbox next to "content" property non-toggable in case of pseudo elements Sounds just as bad. That would cause a lot of frustration too, I believe. |
||||
►
Sign in to add a comment |
||||
Comment 1 by susan.boorgula@chromium.org
, Jun 18 2018