topic Re: Repeating Linear Gradient is supporting in latest version in Discussions

Repeating Linear Gradient is supporting in latest version

Naveen_k08 — Wed, 03 May 2023 12:33:53 GMT

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:

Re: Repeating Linear Gradient is supporting in latest version

jscher2000 — Thu, 04 May 2023 18:05:48 GMT

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):

Re: Repeating Linear Gradient is supporting in latest version

Naveen_k08 — Tue, 23 May 2023 12:00:32 GMT

@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

Re: Repeating Linear Gradient is supporting in latest version

Naveen_k08 — Tue, 23 May 2023 12:04:33 GMT

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

Re: Repeating Linear Gradient is supporting in latest version

jmpnew — Tue, 23 May 2023 16:03:32 GMT

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

Re: Repeating Linear Gradient is supporting in latest version

jscher2000 — Tue, 23 May 2023 23:06:12 GMT

@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-textarea-html-element

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.

Re: Repeating Linear Gradient is supporting in latest version

jscher2000 — Tue, 23 May 2023 23:07:36 GMT

@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