Hi everyone,
I’m building a small Ionic app (Angular + Capacitor) where users can create short videos with text overlays— basically a lightweight editing flow using a library similar to macbook editor.
Everything looks fine in the app preview:
-
Text positioning is correct
-
Line spacing and alignment look good
-
Fonts render as expected
But after exporting/saving the video (using a canvas-based approach + media encoding), the final output has issues:
-
Text shifts slightly out of position
-
Line height looks different
-
Some fonts render inconsistently compared to the preview
I’m suspecting this might be related to how the WebView (via Capacitor) handles rendering vs how the final video is generated.
Current setup:
-
Ionic (Angular)
-
Capacitor for Android build
-
Canvas-based rendering for video frames
-
Custom fonts loaded into the app
Has anyone run into differences between in-app preview vs exported media like this?
Is this more of a WebView rendering limitation, or something I should handle differently in the export pipeline?
Any pointers would help—especially if you’ve worked on media-heavy Ionic apps.
Thanks!