search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.48k stars 289 forks source link

Popup breaks with some css resets #568

Open RJWadley opened 2 years ago

RJWadley commented 2 years ago

The visbug popup seems to depend on some styles that can get reverted with some newer css resets, causing it to appear beneath the page content, full width, and in the document flow.

Steps to reproduce:

  1. Create a react app that uses https://github.com/elad2412/the-new-css-reset
  2. Open visbug
argyleink commented 2 years ago

confirmed here https://stackblitz.com/edit/react-ts-bmgkzm?file=style.css,new-reset.css

curious that selector has higher specificity than a constructed stylesheet in a shadow :host. will investigate. thanks for reporting!

argyleink commented 2 years ago

after some research, it appears that my :host styles need an !important in order to win over a style like this.

ToDo: