Strange clipping of CSS 3D elements in libWebKitGTK / webView on Ubuntu

Discussion
, ,
1

HI, I have created a 3js app that runs great using CSS renderer and positioning some DIVs in my 3D scene across basically every browser I’ve tested (Mac / Win / Linux).

Mac (M1) - Safari, FireFox, Vivaldi, Chrome all work great
WIn - Edge, Chrome, FireFox all work great
Linux/Ubuntu - FireFox, Chrome work great

My app runs both as a web app (as tested above in browsers) and a desktop app (using both Electron a native C/C++ app I built that uses the WebView header-only library to load the system WebView at runtime).

But, I’m trying to build the native Linux app using the lightweight WebView library which in turn uses libWebKitGTK (v4). However, I get this strange clipping behavior in the app for my CSS content.

Debugging the app on Ubuntu - MP4 screen record (It’s 9MB mp4 but I couldn’t upload inline bc this forum allows max 8MB uploads)

Not sure where to start debugging this but someone might have an idea that points me in the right direction… In that scene, the blocks are actual meshes but the popups are DIVs that I position into my scene using the CSSRenderer.

Thanks

2

That is strange. It looks like camera far plane clipping but as far as I know, they CSSRenderer doesn’t implement far plane clipping… but it can’t hurt to check, or mess around with
camera.far = 10000; camera.updateProjectionMatrix() and see if the behavior changes…
Also perhaps increasing z-index: style on the css render to a higher number like 10 or smth.

End of the day, if it’s correct on major browsers but only incorrect on electron, then it sure sounds most likely like a bug in electrons webview.

1 Like
3

Thanks, I’ll test that. Yeah, in the build where I see the issue I’m not using Electron. It works fine in Chromium/Electron but in my C/C++ app that uses libWebKitGTK I see the clipping problem. I’ll keep working on it and drop some info here if I figure it out. I’d prefer not to use Electron but we’ll see how it works out. And yep, it works great in every browser I’ve tested.