Recently, I incorporated a text block into a section of my webpage that utilizes parallax scrolling. This particular text block has been styled to include a subtle text shadow effect.
However, when viewing the page in Opera, I encountered an issue where I had to use the !important declaration for it to actually apply the text shadow. Otherwise, it defaulted to:
* {
text-shadow: transparent 0px 0px 0px,
rgba(0,0,0, 0.68) 0px 0px 0px !important
}
The strange part is that there is no indication in my code that would cause this unexpected behavior.
Interestingly enough, everything functions as expected in Firefox.
Initial Styles
h1.mainText {
color: white;
font-weight: 100;
font-size: 46px;
line-height: 1em;
text-transform: uppercase;
text-shadow: 0 1px 3px fade(black, 40%);
margin-top: 186px;
[...]
}
Final Output