Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Line-start delimiter stays fixed when scrolling #171

merged 1 commit into from

2 participants


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.


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.

  1. There's a vertical line running down the left side of the editor, indicating where the start of the line is.
    Line start indicator after scroll

  2. When you scroll the edit area, the line start indicator stays in place, instead of scrolling with the editor
    Line start indicator

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.

@LeaVerou LeaVerou merged commit caf32a6 into LeaVerou:master

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.

@GeorgeTzellis {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. > pre {background-origin: content-box}

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;


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.


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: local, background-attachment: local, local
scrollbar background appears white

background-attachment: local, scroll
scrollbar background appears white with noise

(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.

@GeorgeTzellis GeorgeTzellis referenced this pull request from a commit
@GeorgeTzellis GeorgeTzellis Line-delimiter scrolls (#171), is unobtrusive
The line-delimiter used to remain at the same position when the editor scrolled horizontally, betraying its function.

The new line-delimiter also limits itself to the content you've written.
You can now tell when there are empty lines at the end of your input, and distinguish between 1 empty line and 10.
I think this is a good pairing with the unobtrusive design of the line-number indicator.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 21, 2012
  1. @GeorgeTzellis
This page is out of date. Refresh to see the latest.
Showing with 6 additions and 2 deletions.
  1. +6 −2 style/style.css
8 style/style.css
@@ -193,8 +193,7 @@ html.supports-range label.slider {
height: 100%;
box-sizing: border-box;
overflow: auto;
- background: url(/img/noise.png),
- linear-gradient(left, hsl(24,20%,91%) 1px, transparent 1px) 2.8em 0 no-repeat;
+ background: url(/img/noise.png);
background-color: hsl(24, 20%, 95%);
font: 100%/1.5 Monaco, Consolas, Inconsolata, 'Deja Vu Sans Mono', 'Droid Sans Mono', 'Andale Mono', 'Lucida Console', monospace;
tab-size: 4;
@@ -226,10 +225,15 @@ body[data-seethrough] > pre > span.token { > pre {
position: relative;
padding: 1em 1.5em 1em 3em;
+ background: linear-gradient(left, hsl(24,20%,91%) 1px, transparent 1px) -3px 0 repeat-y;
+ background-size: 2px auto;
+ background-origin: content-box;
overflow: visible;
word-wrap: normal;
font: inherit;
outline: none;
+ min-height: 100%;
+ box-sizing: border-box;
#result {
Something went wrong with that request. Please try again.