GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account
Between the line-number indicator and the editor area, there's a line that indicates where the start of each line is.
This delimiter stays fixed instead of scrolling with #css and #html.
(an effect most noticeable in vertical view).
This commit fixes the issue.
Edit delimiter stays fixed instead of scrolling
Hi, thanks for the contribution!
Could you explain a bit more what this patch solves? I’m not sure I follow. A screenshot of the issue would be helpful.
Also, with the current CSS, the line doesn't appear at all in Chrome Dev in OSX (it appears in FF and Safari)
Oh wow, that’s pretty awful. Thanks for the fix! Merging.
Merge pull request #171 from GeorgeTzellis/master
Line-start delimiter stays fixed when scrolling
This was merged for a while, then reverted.
I'll send a new pull request soon.
Ok! I think the issue can be fixed pretty easily: Just set background-attachment: local; to the gradient that makes the vertical line. It won't work in Firefox for now, but it will once FF supports background-attachment: local.
This would work in WebKit, but unfortunately breaks the custom scroll-bars' background.
(I'm not going to put the effort into fixing those).
Any changes to the editable area's padding-left will have to be manually duplicated for the parent section's background-position.
Any changes made to the editable area's padding-left will be reflected on the line-delimiter's position automatically.
I suppose that means it's easier to implement a responsive design.
Weigh each case, and let me know.
Are you sure it's not because you've specified the same background-attachment for all background layers?
You can include multiple, like (random example): background-attachment: local, scroll, local;
background-attachment: local, scroll, local;
Works if I switch the backgrounds around, setting background: gradient, noise; attachment: local, scroll
I'd still go the background-origin route, but it's your call.
background: gradient, noise; attachment: local, scroll
If it works that way, wouldn't it work with background-attachment: scroll, local;?
If we go the background-origin route, are there other changes required too? I remember this pull request had quite a lot of changes, and I have a hunch it doesn't really need that many.
(Yes, I know I could answer these questions pretty easily by looking into it myself; however I really don't have the time right now)
background-attachment: scroll, local;
background-attachment: local, background-attachment: local, local
scrollbar background appears white
background-attachment: local, local
background-attachment: local, scroll
scrollbar background appears white with noise
background-attachment: local, scroll
(I suppose the gradient's transparency allows the scrollbar's default white color to show).
In the pull request,
background-size: 2px auto was set to prevent a rendering bug in WebKit (gradient wouldn't appear without it. In fact, after further testing, I see auto should be turned to 100%, or WebKit won't render it if there aren't enough lines)
min-height: 100% was set to extend the editable area over the whole editor page. Preferred over height: 100% because that causes jitters when using the arrow keys to move the caret beyond the last line.
box-sizing: border-box prevents scrollbars when they are unnecessary.
background-size: 2px auto
Merge pull request #188 from GeorgeTzellis/master
Line-delimiter scrolls (#171), is unobtrusive