Comments (13)
This also happens on Yari, BTW.
from bob.
Please do some co-work to solve this issue pray (cc @Gusted)
Also the error that got logged for me:
![](
Seems to be some error that the wrong child is being removed. However this is triggered by Dark Reader somehow, but the code is on MDN side which execute and thrown a error.
Regards,
Gusted
from bob.
Debugger says it's happening inside a shadow root, but I'm not sure how Dark Reader can affect shadow tree? Oh I see it does insert some style elements inside shadow tree.
I tried installing Dark Reader on Edge and this doesn't happen there, so this is currently Firefox specific.
from bob.
Okay, so there is a repo named mdn/bob where the relevant code is:
Lines 68 to 85 in 01097de
Still not sure what's causing this though.
from bob.
Dark Reader somehow gets access to <shadow-output>
element earlier than the renderer does (on Firefox but not on Edge/Blink), and thus hits the condition that otherwise wouldn't.
Without Dark Reader it does not get anything:
@Gusted What could be a reason when Dark Reader opens an empty shadow root and insert styles there?
from bob.
https://github.com/mdn/bob is used in the same way more or less in Kuma and in Yari.
So shall we move this issue to that repo? Or is it very much a bug in the Dark Reader extension?
from bob.
Let's move to that repo 👍
from bob.
@Gusted What could be a reason when Dark Reader opens an empty shadow root and insert styles there?
It's basic practice for Dark Reader to insert those 2 styles. The first one is to make overriding inline styles work. The second one is the override that's provided by dynamic-theme-fixes.config for the correct site.
https://github.com/darkreader/darkreader/blob/master/src/inject/dynamic-theme/index.ts#L130 This function add those styles into it.
EDIT:
Or is it very much a bug in the Dark Reader extension?
No it doesn't seems to be... the code that causes this error doesn't expect Dark Reader styles to be there... and therefore handles it as it's own? which causes issues.
from bob.
Opened up a PR to fix this problem #539.
As it simply wants to remove an undefined
or null
in some cases a simple check should prevent this.
Same error when you try to remove an non-object.
from bob.
It's basic practice for Dark Reader to insert those 2 styles. The first one is to make overriding inline styles work. The second one is the override that's provided by dynamic-theme-fixes.config for the correct site.
Could it be done in a lazy way? It doesn't seem right to insert styles when the root is empty.
from bob.
Could it be done in a lazy way?
It's static so it doesn't have any checks in place, only the dynamic styles are being placed when needed.
It doesn't seem right to insert styles when the root is empty.
It insert the styles after Dark Reader detects that an new root is opened as this should be filled with elements later and waiting on the shadowroot to wait for elements coming in doesn't seems to be a good practice in my eyes.
from bob.
only the dynamic styles are being placed when needed.
That's good, but why can't the static ones be lazily inserted only when that happens?
from bob.
That's good, but why can't the static ones be lazily inserted only when that happens?
Not really.... Because this style override
is for fixes. Because the shadow root doesn't necessary have dynamic style it can have a style that's being fixed by the override
but doesn't have dynamic styles and therefore won't get actually fixed.
from bob.
Related Issues (20)
- Wrap localStorage read/write access in try-catch block
- Insufficient color contrast in the interactive examples HOT 1
- Utilize ES6 features HOT 3
- css-examples: Regressions in bob v3
- Invalid CSS after editing isn't highlighted
- CSS editor: ctrl-X ctrl-V doesn't work
- Copy to clipboard from 'Try it' is not working
- backdrop-filter demo says the feature is not supported by Safari (but it is) HOT 9
- Horizontal scrollbar obscures content HOT 2
- Interactive Example Search Box looks broken / not intended HOT 3
- Consider extending feature detections for CSS functions HOT 4
- Interactive examples ignore changes of color schemes when features are not supported HOT 2
- in "try it" section"copy" button is not functioning!! HOT 1
- Remove feature detection and hiding of demo's in unsupported browsers HOT 10
- Code snippet copy button not working HOT 6
- interactive examples: line numbers and code overlaps HOT 14
- HTML examples: sometimes line counter collapses HOT 7
- Bug: Line number in code snippets doesn't stay on the left side when scrolling HOT 11
- Interactive examples 2-column layout is not compatible with mobile HOT 5
- Code line numbers overlap with line content. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bob.