ISSUE [w/ Fix] : Bug with Masking causes Major Toggle Issue

[bradennapier]

There is a bug with the toggle that when certain elements become rendered on the screen, the masking becomes messed up.

This style is required to resolve the issue:

   -webkit-mask-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

When this is added via inspector, it resolves the problem:

[nikgraf]

interesting @bradennapier - do you have simple code example so I can reproduce it?

[rchanou]

I also got this for certain toggles, though I haven't been able to isolate why. It seems to happen specifically in Chrome; Firefox and Edge show fine. The fix also works when applied via JS:

const toggleFixStyle = {
  WebkitMaskImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)'
};
...
<div>
  <Toggle /> {/* masking messed up */}
  <Toggle style={toggleFixStyle} /> {/* masking fixed */}
</div>

[rchanou]

All right, it has to do with adjacent elements that have -webkit-backface-visibility: hidden. Here's a simple test case:

<div>
  <Toggle />
  <div style={{ WebkitBackfaceVisibility: 'hidden' }} />
</div>

The toggle should have bugged masking. Removing -webkit-backface-visibility: hidden via the inspector fixes it.

[rchanou]

Probably just a Chrome bug we'll have to deal with.

[nikgraf]

@rchanou are you still using it? does the bug still exist?

[rchanou]

I don't know, I removed the offending -webkit-backface-visibility: hidden a while ago. Unless @bradennapier wants to chime in, I would say go ahead and close this because it appears to be a Chrome issue (which may be fixed by now), it's a rare case, and there's a documented workaround.