I’ve just spent half of my day trying to figure out why a form element I was adding to a page (not originally created by me) was not being displayed. It was in the HTML, I could get metrics for the element to be highlighted on screen through the inspector, but it was just not visible in the rendered page! I even removed it from all parent elements, put the z-index to a ridiculously high value, and added explicit visual properties (borders, etc) in case some obscure style defined somewhere else was otherwise removing the native styles. No luck.
Finally, after meticulously going through each element in the layout, I found some unrelated container div which had a :before style adding a very, very subtle gradient to the top of the background of the page. And this… THIS is what was covering up and obscuring my form element. This stupid pseudo-element which couldn’t be found in the inspector and otherwise didn’t exist unless you looked at the styles and saw that it was defined there. I used to like the idea of :before/:after pseudo elements, but now I’m not so sure :bad:
