Created attachment 8649863 [details] multiply-bug-ff-mac-40.0.2 User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36 Steps to reproduce: <div style="background-image:url(); position:relative; height:400px;"> <div style="position:absolute; height:100%; width:100%; background-color:red; mix-blend-mode: multiply;"></div> <div style="position:absolute; top:40px; color:#fff;">Some content</a> </div> Actual results: Red overlay is black and glitchy, and the overlay text causes a horrid rain of fire effect when scrolling. Occasionally the image appears in blocks through the red. If I disable hardware acceleration in the firefox settings then its fine. Expected results: It works fine on other browsers. With a red overlay on the image, with the multiply effect. (OSX Mac) Windows Firefox seems fine.
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86_64
Dan, I have a similar issue on my site, horrid psychedelic effects and all, on OSX Firefox only. In case this may help, I opened a ticket on stackoverflow and someone pointed out that the effect can come from content not fitting fully within its parent. In my case, some JS was resizing images to fit within the parent, but sometimes would be 1px larger than the parent, which would trigger the bug. Adding padding: 1px to the content seemed to "fix" the bug, but clearly there is a much larger underlying issue.
Hello Dan, Is this still an issue or did David's advice help out? Thank you, Justin
I will close this bug due to lack of response. I will reopen this bug if the reporter is still experiencing this problem.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.