Elements Invisible but still clickable

HTML & CSS
1

For some reason, JUST ON CHROME, a couple of elements are invisible. One is layerSlider (under LATEST RELEASES FROM OUR CD CATALOG) and the other is a couple of Instagram posts. If I hover my mouse over the layerSlider I can see the link urls changing and they are clickable. Same with the instagram. Like they are there taking up space, but invisible.

They show up on Firefox and Safari just fine. I can’t seem to debug it. What I do see in common with these two invisible sections (when i look on FF and Safari) is that they load by fadeinZoomin. I don’t know how were that animation was added to these two places.

Any ideas? Here’s the website https://www.newearthrecords.com/

2

There is a CSS rule setting the opacity: 0 on

.tb-scroll-effects.desktop #custom-main .element-section>.element-content, .tb-scroll-effects.desktop #custom-main .element-section>.element-columns .element-content, .tb-scroll-effects.desktop #custom-main .element-section>.element-columns .element-icon_box

That is impacting both the instagram and layerSlider

3

They seem to be fine on my Chrome (windows10). The ‘Latest releases’ only appears once you scroll far enough to activate the fade in effect.

1 Like
5

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.newearthrecords.com%2F

https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.newearthrecords.com%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.