Painting issue in firefox(OSX only), in overlayed modal using ReactJS

Question

I was not able to find anything similar to this issue, possibly due to a lack of vocabulary...

I have this strange issue on my ReactJS page, that only seems to occur in Firefox on OSX.

Basically everything works fine when you open the modal initially, but then after clicking around a bit, som parts (Or sometimes all) of the modal disappears, and you are able to see through to what is behind the modal. When you afterwards hover the mouse over elements, they become visible again. I have some pictures showing the issue, (One of what it is supposed to look like, and one where the issue occurred in part of the modal).

It seams like som sort of painting issue, anybody got a clue what is going on? Any help would be greatly appreciated!

Answer 1

The problem you exposed seems to be related to this open issue:

https://bugzilla.mozilla.org/show_bug.cgi?id=1348627

As you can see in the image attachments reported by users, the bug causes glitches when rendering a web page with chunks of the page that are rendered in the wrong position.

Here an example:

https://bugzilla.mozilla.org/attachment.cgi?id=8849478

You have few options since the bug, at the time I am writing, is still in status "Open".

Now the options are:

• ensure that the "layers.enable-tiles" option of Firefox in not set to true
• ensure that you are using the last version of Firefox
• consider to report your issue in the thread I provided
• ask for help in the thread
• check that your operating system drivers are up-to-date

Note:

Since the issue has been reported on Windows, and you are facing this issue on OSX, consider to report that you found this issue also on OSX or search if there are other issues reported by OSX users like the one you have.