Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Continuous Height Recalculation and Flickering When Loading Fonts in AutoHeightWebView #270

Open
vasanshettiTharun opened this issue Feb 6, 2025 · 0 comments
Assignees
Labels

Comments

@vasanshettiTharun
Copy link

When loading custom fonts inside @font-face in an AutoHeightWebView, the component enters an infinite height update loop, continuously toggling between different height values. This causes severe flickering and performance issues.

To Reproduce:
Load a WebView with dynamically loaded fonts using @font-face.
Use onSizeUpdated to track height updates.
Observe that the height toggles back and forth continuously without stabilizing.

`
import React, { useState, useCallback, useMemo } from 'react';
import AutoHeightWebView from 'react-native-autoheight-webview';

const generateHTML = (content) => `

<style> @font-face { font-family: 'CustomFont'; src: url('file:///android_asset/fonts/CustomFont.ttf') format('truetype'); } body { font-family: 'CustomFont', sans-serif; } </style> ${content} `; export const TestWebView = () => { const htmlContent = useMemo(() => generateHTML("Sample Text"), []); const handleSizeUpdated = ( console.log("Updated Height:", newHeight); ); return ( ); };

`

Expected behavior:
The WebView should correctly calculate its height once, or at most, a few times, rather than toggling endlessly.
Loading fonts dynamically should not cause repeated height calculations.

Screenshots/logs:
Updated Height: {height: 991.67, width: 314}
Updated Height: {height: 696.33, width: 314}
Updated Height: {height: 991.67, width: 314}
Updated Height: {height: 696.33, width: 314}
(repeats indefinitely)

Environment:
OS: Android
OS version: Tested on Android 12
react-native version: 0.77
react-native-webview version: [13.13.2]
react-native-autoheight-webview version: [1.6.5]

Possible Causes & Notes
The WebView may be measuring its content before fonts are fully loaded.
Since the font loading alters text rendering, the WebView detects size changes and recalculates height continuously.
This may be fixed by ignoring height updates until the fonts have fully loaded.
Would appreciate any insights or workarounds from the maintainers!

Would appreciate any insights or workarounds from the maintainers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants