Line-start delimiter stays fixed when scrolling #171

Merged
merged 1 commit into from Jul 22, 2012

Conversation

Projects
None yet
2 participants
Contributor

GeorgeTzellis commented Jul 21, 2012

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.

Owner

LeaVerou commented Jul 22, 2012

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.

Contributor

GeorgeTzellis commented Jul 22, 2012

  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)

Owner

LeaVerou commented Jul 22, 2012

Oh wow, that’s pretty awful. Thanks for the fix! Merging.

LeaVerou added a commit that referenced this pull request Jul 22, 2012

Merge pull request #171 from GeorgeTzellis/master
Line-start delimiter stays fixed when scrolling

@LeaVerou LeaVerou merged commit caf32a6 into LeaVerou:master Jul 22, 2012

Contributor

GeorgeTzellis commented Aug 18, 2012

This was merged for a while, then reverted.
I'll send a new pull request soon.

Owner

LeaVerou commented Aug 18, 2012

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.

Contributor

GeorgeTzellis commented Aug 19, 2012

.editor.page {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.

.editor.page > 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.

Owner

LeaVerou commented Aug 19, 2012

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;

Contributor

GeorgeTzellis commented Aug 19, 2012

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.

Owner

LeaVerou commented Aug 19, 2012

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)

Contributor

GeorgeTzellis commented Aug 19, 2012

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.

LeaVerou added a commit that referenced this pull request Aug 24, 2012

Merge pull request #188 from GeorgeTzellis/master
Line-delimiter scrolls (#171), is unobtrusive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment