I use a gradient overlay on several sections of my website and this is causing an issue when the page is linearized (for accessibility)- the :before pseudo-element that has the gradient styling appears as the first element on my page and covers the menu so that it is not visible. I’m not sure if this is an issue with how I’m implementing it or if its a bug.
See the issue at the link below, the gradient is in the hero section and I’m using the linearization tool from ANDI
I believe I worked out a solution and I’m posting it here in case someone else has this issue. This was flagged by our Section 508 accessibility tester so it was essential that I get it fixed so the site could be launched.
Because linearization makes all positions:static, anything that was positioned absolute (like pseudo-elements styled as a gradient overlay) are getting pushed to the top of the page and interfering with the rest of the page. I added position:relative !important and also adjusted the z-index of the parent element and it is better. However, it would be nice if there was a different way to style these gradient overlays, as depending on the tool being used, the !important selector may not be enough to override the linearization styles.