You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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';
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.
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!
The text was updated successfully, but these errors were encountered:
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!
The text was updated successfully, but these errors were encountered: