Firefox fails to render group box border

[RobThaBlob]

On Firefox, the group box border does not render.

[jdan]

Is this still happening for you? https://jdan.github.io/98.css/#group-box

I see them on 77.0.1

[RobThaBlob]

Jordan,

Yes, I'm afraid it's still happening.

[image: image.png]

Regards,

Rob

On Fri, 19 Jun 2020 at 14:43, Jordan Scales notifications@github.com wrote:

Is this still happening for you? https://jdan.github.io/98.css/#group-box

I see them on 77.0.1

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdan/98.css/issues/42#issuecomment-646644527, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANC6HIPHP53ZQA3VK2ZICWDRXNTRNANCNFSM4MPCS3QA .

[RobThaBlob]

Jordan,

I'm afraid I snipped the wrong image...

[image: image.png] Regards,

Rob

On Fri, 19 Jun 2020 at 14:43, Jordan Scales notifications@github.com wrote:

Is this still happening for you? https://jdan.github.io/98.css/#group-box

I see them on 77.0.1

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdan/98.css/issues/42#issuecomment-646644527, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANC6HIPHP53ZQA3VK2ZICWDRXNTRNANCNFSM4MPCS3QA .

[jdan]

@RobThaBlob sorry, the image doesn't appear to be attaching for me. you may need to comment from the github interface. could you let me know which version of firefox you're running?

[DannyJJK]

This happens to me as well, Firefox 89 on macOS Big Sur. Works fine on Chrome.

[dwhinham]

I figured out that it seems to be caused by a bug in Firefox's new WebRender engine, which started being enabled by default for Windows users since Firefox 78, and for other OSes/hardware configurations gradually over time.

If I set gfx.webrender.force-disabled to true in about:config, the GroupBox borders reappear for me in Firefox 90.0.2 (Linux).

I think this open Mozilla bug is probably related: https://bugzilla.mozilla.org/show_bug.cgi?id=1496538

I've opened #117 to provide a workaround for this. Basically instead of an inset box-shadow, we create a tiny .SVG image like this, similar to how some of the other widgets are done:

Then we can use border-image with a slice value of 2 to create the border effect. This is how it looks under Firefox 90.0.2 and Chromium 92.0.4515.131:

Thanks to the very cool Vercel integration, you can test this approach here: https://98css-git-fork-dwhinham-fix-42-jdan.vercel.app/

Cheers! 🙂