Currently facing a perplexing issue:
In my code, there is a div called .pagebody with a box shadow assigned as follows:
-webkit-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42);
box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42);
-moz-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42);
However, during testing on Chrome, I noticed that after some page refreshes and anchor clicks, the box shadow disappears (even after refreshing). Even in the console log, it shows as present but does not display.
I attempted various solutions to resolve this and found that if I remove the -moz-box-shadow property, the shadow reappears and functions properly. But when I apply it again, the issue resurfaces after a few interactions.
My current workaround involves the following fix:
@-moz-document url-prefix() {
.pagebody {
-moz-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42);
}
}
This solution works alright, although it's not ideal. Any insights on what might be causing this or perhaps a cleaner fix?
On another note,
I checked the Chrome bug list but couldn't find any related issue reported. Also, forgot to mention that I'm using Sass in this project.
Appreciate any help!