Visual Editor loses track of which element is selected in the tree

[droidgoo]

Has anyone else noticed this behavior?

I can be working with the Visual Editor, and toggling things fine… the changes to the CSS file track accordingly… then suddenly (usually when i switch to another application, like a browser) the next time i come back, the Visual Editor has lost the ability to recognize which element i have highlighted in the tree.

If i make a change to a setting, it will show up in the CSS in the wrong place (like on the body). The only way i seem to be able to get it to focus correctly again is to make a manual edit to the CSS and then it seems to wake up again.

in the picture, i have a div selected with the class .container
i show in the CSS the .container class has a flex property defined

but in the Visual Editor, that definition is not showing.

now if it so much as change a single letter in the CSS code view, the Visual Editor will wake up and show all the CSS things that it’s supposed to show.

it it me?

note: the waking up behavior seems to be related to a “reload” routine, but “refresh” doesn’t seem to trigger it.

[droidgoo]

SOLVED!

The trick is to keep the upper part of the panel visible so you can see (and select) which part of the CSS the Visual Editor is focused on. It’s not enough to just select the element from the tree because there may be more than one CSS rule that applies.

The Visual Editor only apples to the CSS rule that is highlighted, as shown here.

thanks for coming to my TED Talk.