0

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!

Image where the issue occurs

Image where the issue does not occur

user1898027
  • 330
  • 2
  • 13
  • Could be a lot of things. Please reduce your page to a bare minimum while maintaining the bug (I know it might not be simple). You could first try to force a repaint (toggle `display:none`) of the related elements to see if it's really a rendering hiccup or if something may make the browser think it should render like this. – Kaiido Feb 05 '21 at 08:07
  • 1
    Hi @Kaiido Thank you for your comment, I will try to reduce it to the minimum amount of code still causing the bug. – user1898027 Feb 05 '21 at 08:12
  • I don't think people can give some answer directly without knowing your implementation. One practical approach is debugging with breakpoints on the abnormal elements. Open devtools->Elements and then set breakpoints on the elements breaking on "attribution modifications" etc. And try to reproduce the problem to see whether the breakpoints work. If they work, then you can see the stack to find the reason. – Wenbo Feb 06 '21 at 08:15
  • Perhaps this will help, it speaks of setting proper background color in react using `rgba` CSS: https://stackoverflow.com/questions/31336569/how-to-set-background-color-of-view-transparent-in-react-native – sativay Feb 10 '21 at 22:16

1 Answers1

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.

Emanuele Scarabattoli
  • 4,103
  • 1
  • 12
  • 21
  • Hi Emanuele Thank you for the answer, and for the similar issue report, it has been most helpful. I have come to the conclusion, that I should probably have posted it to firefox's issuetracker, as you are saying in the beginning, but anyways thank you for the directions :) – user1898027 Feb 15 '21 at 12:35