From c79d78485b125e1b4265d041acaca3972d4ed04a Mon Sep 17 00:00:00 2001 From: sravan Date: Fri, 7 Aug 2026 12:13:09 +0530 Subject: [PATCH] Fix hole-punch regressions: transparency chain, black backing, keyboard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three fixes for the hole-punch build: 1. White background + shared screen not showing: body and .content both use var(--bg) (a light colour) and were still opaque, occluding the native video behind the WebView. Make the WHOLE meeting chain transparent under .bz-hp (body + .content, on top of .meet-grid/tiles). 2. Backing: also set the view controller's view background to black (saved/ restored) so any transparent gap reads black, not white — belt-and-braces with webView.backgroundColor. 3. Keyboard covering the in-call chat: keyboard resize is "none", so the absolutely-positioned meet panels don't move for the keyboard. Lift .meet-panel by the reported keyboard height (body.kb-open → bottom: calc(var(--kb)+12px)); --kb/kb-open are already set globally by the Keyboard listener. Plugin change (VC background) needs a build; the CSS is web-deployed. Co-Authored-By: Claude Opus 4.8 --- .../ios/Sources/NativeCallPlugin/NativeCallPlugin.swift | 4 ++++ server/public/home.html | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/mobile/plugins/native-call/ios/Sources/NativeCallPlugin/NativeCallPlugin.swift b/mobile/plugins/native-call/ios/Sources/NativeCallPlugin/NativeCallPlugin.swift index 47ed122..770011b 100644 --- a/mobile/plugins/native-call/ios/Sources/NativeCallPlugin/NativeCallPlugin.swift +++ b/mobile/plugins/native-call/ios/Sources/NativeCallPlugin/NativeCallPlugin.swift @@ -58,6 +58,7 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega private var savedWebOpaque = true private var savedWebBg: UIColor? private var savedScrollBg: UIColor? + private var savedVCBg: UIColor? override public func load() { let config = CXProviderConfiguration(localizedName: "Biz Connect") @@ -197,10 +198,12 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega self.savedWebOpaque = web.isOpaque self.savedWebBg = web.backgroundColor self.savedScrollBg = web.scrollView.backgroundColor + self.savedVCBg = self.bridge?.viewController?.view.backgroundColor } web.isOpaque = false web.backgroundColor = .black // shows through the transparent meeting; also the letterbox bg web.scrollView.backgroundColor = .clear + self.bridge?.viewController?.view.backgroundColor = .black // backing so the transparent meeting reads black, not white self.holePunchOn = true } else { self.applyHolePunchRestore(web) @@ -217,6 +220,7 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega web.isOpaque = savedWebOpaque web.backgroundColor = savedWebBg web.scrollView.backgroundColor = savedScrollBg + bridge?.viewController?.view.backgroundColor = savedVCBg holePunchOn = false } diff --git a/server/public/home.html b/server/public/home.html index a5096b7..608cc8d 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -420,9 +420,15 @@ /* Hole-punch: native video renders BEHIND a transparent WebView, so all web UI (bar/menus/panels) floats on top. Make the meeting transparent so the video shows through; on tiles that have native video, hide the web avatar/bg (video shows) while keeping the name/mute/border the web draws. */ + /* The whole ancestor chain (body + .content are var(--bg), a light colour) must be transparent, or it + occludes the native video behind the WebView (that was the "white background, screen not showing" bug). */ + body.bz-hp, body.bz-hp .content{background:transparent!important;} body.bz-hp .meet-grid{background:transparent;} body.bz-hp .meet-tile.bz-hasvid{background:transparent;} body.bz-hp .meet-tile.bz-hasvid .meet-av{display:none;} + /* Keyboard resize is "none", so absolutely-positioned meet panels (chat / participants) don't move for the + keyboard — lift them above it using the reported height (--kb, set by the Keyboard listener). */ + body.kb-open .meet-panel{bottom:calc(var(--kb) + 12px);} @media (max-width:760px){ .meet-grid.sharing-mode{flex-flow:row wrap;height:auto;} .meet-grid.sharing-mode .meet-tile.stage{width:100%;height:auto;flex:1 1 100%;min-height:40vh;}