Comments (7)
Thanks for filing @ikarasz . This was also filed as mdn/kuma#6307 . Do you see this all the time or just intermittently?
from bob.
@wbamberg In the afternoon I noticed the issue on two different computers, now I cannot reproduce it on any of them.
from bob.
@wbamberg In the afternoon I noticed the issue on two different computers, now I cannot reproduce it on any of them.
from bob.
For me it happens very rarely, like once in a month. I found out that:
Element with classes "CodeMirror-gutter CodeMirror-linenumbers" has width set to 1px instead of 29px, which makes grey bar invisible.
Element with class "CodeMirror-sizer" has marign-left set to 0px instead of 30px. It makes whole content be aligned to side of the window, instead of to the side of grey bar.
Elements with classes "CodeMirror-linenumber CodeMirror-gutter-elt" have width set to 1px instead of 21px, which doesn't have any significant impact.
Elements with class "CodeMirror-gutter-wrapper" have property left set to 0px instead of -30px. It makes line numbers be shown on top of text, instead of on the side of it.
I will create an issue in Code Mirror repo, maybe they will know what to do. #6953
from bob.
I found out that element "editor" which is passed to CodeMirror, has offsetParent set to null and all getBoundingClientRect properties are 0 when this issue occurs. Same thing is true for that elements parent and for the body element. This is also true when editor is stripped of almost all JS code. Furthermore sometimes this is also true even after "load" event was fired by interactive example window.
On local env I was never able to reproduce this issue, but on MDN I figured out how to do it easily. I just open Array page and then open all of its methods in new tabs by using right click, usually 1 or 2 will have this problem.
@schalkneethling Any idea how is that possible?
from bob.
I had it happen to me just now, in a private browsing window on Windows 10. This is my browser information.
Microsoft Edge
Version 104.0.1293.54 (Official build) (64-bit)
Refreshing the page seems to fix the problem.
from bob.
Closing in favor of #976.
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
- Migrate to CodeMirror v6 HOT 4
- Dark mode: Some keywords don't have enough contrast in some interactive examples HOT 3
- Poor contrast ratio on dark mode with interactive example HOT 1
- Try It code coloring inaccessible in dark mode for CSS functions HOT 2
- Maturing Bob
- The output label is covering the output content HOT 2
- Testing interactive examples with new BOB changes HOT 10
- Is auto-deployment of new/updated example pages broken? HOT 3
- Interactive examples: scrollbars break dark theme HOT 1
- interactive examples: line numbers and code overlaps HOT 14
- 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.