CSS linear gradient not scrolling with content

Question

Problem

I have a textarea which uses a linear gradient as its background image. I am trying to emulate a "lined paper" effect. I've set my font-size and line-height to the get the correct spacing between the lines and the text;

however, once I scroll down the textarea, I notice a problem:

Namely, that my background-image does not scroll with the text. I have tried background-attachment: scroll, background-attachment: fixed and background-attachment: local, and none solve my problem.

CSS

textarea {
    height: 200px;
    font-size: 20px;
    line-height: 1;
    background-image: repeating-linear-gradient(to bottom,
                                                #fff,
                                                #fff 9.5%,
                                                #000 9.5%,
                                                #000 10%);
}

Fiddle

Answer 1

background-attachment: local actually does work; just not in Firefox, where I was testing.