bug: Background flickering on Android.

[YescoSoftware]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 8.0.0
  @capacitor/core: 8.0.0
  @capacitor/android: 8.0.0
  @capacitor/ios: 8.0.0

Installed Dependencies:

  @capacitor/cli: 8.0.0
  @capacitor/core: 8.0.0
  @capacitor/android: 8.0.0
  @capacitor/ios: 8.0.0

[success] Android looking great! 👌

Plugin Version

▲   💊   Capgo Doctor  💊
│
●   App Name: Mobile Test App
│
●   App ID: app.outsystems.yescodev.MobileTestApp
│
●   App Version: 0.1
│
●   Web Dir: dist
│
●   OS: darwin Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:30 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6020
│
●   Node: v22.21.1
│
●   Installed Dependencies:
│
●     @capgo/cli: 7.56.4
│
●     @capgo/camera-preview: file:plugins/capgo-camera-preview-8.0.4.tgz
│
◇  Latest Dependencies:
│
●     @capgo/cli: 7.56.4
│
●     @capgo/camera-preview: 8.0.5
│
▲  🚨 Some dependencies are not up to date
Error: 
message: Some dependencies are not up to date
stack: 
  - Error: Some dependencies are not up to date
  -     at i5 (/Users/spencerbuhler/.npm/_npx/cbe5d2f7487966de/node_modules/@capgo/cli/dist/index.js:171:8974)
  -     at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
  -     at async t.<anonymous> (/Users/spencerbuhler/.npm/_npx/cbe5d2f7487966de/node_modules/@capgo/cli/dist/index.js:339:130)
  -     at async t.parseAsync (/Users/spencerbuhler/.npm/_npx/cbe5d2f7487966de/node_modules/@capgo/cli/dist/index.js:17:4207)

context(s)

ManualModel: false
AutoMode: false
CapgoCloud: false
OnPremise: false

Platform(s)

Android

Current Behavior

When calling CameraPreview.start() on Android, several UI rendering issues occur:

1. The "Start Preview" button shows a continuous clicking animation even though
   it's not being clicked and the startPreview code is not running
2. The top banner flickers constantly
3. The background area (above/below camera preview) flickers between black and white
4. Initially, the background stays green. After a few seconds, the "Hurray"
   banner begins flickering
5. When the app is put into background and brought back to foreground, the
   background correctly turns black

Workaround: Putting the app into background and foreground multiple times
eventually resolves all the flickering issues.

Implementation details:

• On successful CameraPreview.start(), I:
  • Set CSS variables for preview size
  • Add background-color: transparent !important to body
  • Toggle UI to show camera preview with an overlay container for touch events
  • Use a transparent container on top of preview for focus/zoom listeners

Expected Behavior

The camera preview should start smoothly without any UI flickering, similar to
the behavior on iOS. The background should immediately be transparent/black,
buttons should not show false clicking animations, and banners should remain stable.

Code Reproduction

GitHub Repo
The source code is generated by OutSystems ODC and can be built directly in Android Studio. I did have to run npm ci prior to building it as that will update capacitor to the correct version. OutSystems does this in the build process in the cloud.

I am happy to get you any other files you are in need of. I am not completely clear on what OutSystems gives when I download the source code but I can send you snippets of the javascript if need be.

Other Technical Details

npm --version output: 10.9.4
node --version output: v22.21.1
Build System: OutSystems ODC Cloud Build Pipeline
Android Galaxy A16 5G
One UI version 8.0
Android version 16

Additional Context

I have messed around with setting html, body, .content all as background-color: transparent !important. But that does not resolve the UI flickering.
I have attached logs from logcat when the UI was actively flickering.
I also have attached a video of it flickering.

AndroidFlickeringCameraPreview.MOV

Registering plugin instance: CameraPreview.pdf

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• bug: Android: Camera not showing #216
• bug: Android: Camera not showing #231
• bug: Android: startRecordVideo() not implemented in @capgo/camera-preview on Capacitor 7 #211
• bug: Error loading camera preview ("camera already started") #187
• Bug: 'disableAudio' true, still requests for audio permission on Android #146

🔗 Related PRs

#190 - fix: Stopping of camera preview & more cleanup [merged]
#191 - feat: Flip camera IOS working again [merged]
#194 - fix(ios): Fixed issue that caused crash of app on destroy of preview. [merged]
#241 - fix(android): CameraX stop deferral deadlocks [merged]
#245 - fix(android): fix camera stop races [merged]

👤 Suggested Assignees

• maximilien0405
• Dalanir
• graphefruit
• elov4anin
• orest

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[shivankacker]

Having the same issue +1

[buhleryesco]

Ya I updated to where I'm using ion-content and other similar elements but still consistently running into issues on the android side. Even when I run the code manually through inspector it happens. I've noticed that the x and y parameters work differently in android vs iOS too.

If I put x: 0, y:80 on iOS I get: {"y":242,"width":390,"x":0,"height":520}.
If I put y:80 without explicitly setting x:0 on iOS I get: "{"y":80,"height":520,"x":0,"width":390}"

Then in android y: 80, x:0: {"x":1,"y":81,"width":383,"height":831}
Android y: 80 and x not explicitly set: {"x":1,"y":161,"width":383,"height":511}

So there are some inconsistencies between iOS and android right now it seems.

[riderx]

Thanks for the report we will have a look