Repeating Linear Gradient is supporting in latest version

[Naveen_k08]

Hi Mate!

We are facing a CSS issue that is not working in the Firefox latest version(112.0.2) on Windows 10 Home

and I want to make a note design using text-area HTML tag so I used Repeating Linear Gradient to draw a line for the each row in the text-area and in other browsers(Chrome, Safari and Opera) it is working but in Firefox is not working and i have checked the CSS property in can-i-use official website https://caniuse.com/?search=repeating-linear-gradient and if i were made a mistake please let me know

CSS that is used in my website

background: repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--theme-description) 40px);

background-attachment: local;

Result:

[jscher2000]

I get lines when I do this (I don't know what that var's value is supposed to be, so I defined something inline for testing purposes):

<textarea cols="40" rows="10" placeholder="Hi" 
style="--theme-description: #f80; 
background-image: repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--theme-description) 40px); 
background-attachment: local;"></textarea>

[Naveen_k08]

@jscher2000above mentioned CSS properties will enable the lines for each row in the block elements, what is my issue is? we got lines for each and those lines are in fixed, so if i enter more than 100 words i will get a scrollbar inside by default and if I scroll the content only the words will scroll not along with lines, but in Chrome, Safari  and  Edge the content are scrolling along with lines.

see for reference below.

Firefox

https://www.awesomescreenshot.com/video/17655995?key=b6674f6338a6706d94c0507338549203

Chrome

https://www.awesomescreenshot.com/video/17082686?key=941cf4fac871a3108799338a0b2227ef

[jscher2000]

---

@Naveen_k08 wrote:

@jscher2000above mentioned CSS properties will enable the lines for each row in the block elements, what is my issue is? we got lines for each and those lines are in fixed, so if i enter more than 100 words i will get a scrollbar inside by default and if I scroll the content only the words will scroll not along with lines, but in Chrome, Safari  and  Edge the content are scrolling along with lines.

---

I missed that part before. It sounds like a problem with

background-attachment: local

(MDN). There is a bug on file about this property not working in a <textarea> control:

https://bugzilla.mozilla.org/show_bug.cgi?id=1007064

(I posted a link to this thread there.)

The bug also was referenced here: https://stackoverflow.com/questions/76169881/how-to-make-the-background-image-as-scrollable-in-the-t...

Is there any possible workaround for this?

I don't think there is a workaround, because as far as I can tell, pages cannot directly style the scrollable region of a <textarea> control, which is what needs to happen.

[Naveen_k08]

@jscher2000  Is there any alternate way or is there any fix for this?

[jmpnew]

After last update it´s not working scroll on any page

[jscher2000]

---

@jmpnew wrote:

After last update it´s not working scroll on any page

---

I think you are describing a different issue (not a problem creating a lined background).

You may want to post this problem on the Mozilla Support site. They have a team of support volunteers to troubleshoot malfunctions with your currently installed version of Firefox, while this site is focused on idea submissions for future versions of Firefox (looking ahead anywhere from 8 weeks to many months). Here's a link to the new question form (for Windows/Mac/Linux): https://mzl.la/3y1vQUQ