admin/ReadKeep
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Simplify NativeWebView CSS and JavaScript height detection

Browse Source 
CSS Changes:
- Removed all overflow/max-width/word-break rules from body/html
- Simplified to match WebView.swift CSS structure exactly
- Only img keeps max-width: 100%
- Removed box-sizing and universal max-width rules

JavaScript Height Detection:
- Simplified from Math.max() with multiple properties to simple document.body.scrollHeight
- This matches how the standard WebView gets height
- Should resolve 'No valid JavaScript height found' errors

The width overflow was caused by aggressive CSS rules that interfered
with native layout. The height detection issue was likely due to complex
JavaScript expressions not working with webPage.callJavaScript().
This commit is contained in:
Ilyas Hallak 2025-10-10 19:46:09 +02:00
parent 008303d043
commit 614042c3bd
1 changed files with 11 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
readeck/UI/Components/NativeWebView.swift
View File

@ -50,16 +50,8 @@ struct NativeWebView: View {
try? await Task.sleep(nanoseconds: UInt64(delay * 1_000_000_000))
do {
// Try to get height via JavaScript - use direct expression instead of function call
let result = try await webPage.callJavaScript("""
Math.max(
document.body.scrollHeight || 0,
document.body.offsetHeight || 0,
document.documentElement.clientHeight || 0,
document.documentElement.scrollHeight || 0,
document.documentElement.offsetHeight || 0
)
""")
// Try to get height via JavaScript - use simple document.body.scrollHeight
let result = try await webPage.callJavaScript("document.body.scrollHeight")
if let height = result as? Double, height > 0 {
let cgHeight = CGFloat(height)
@ -119,11 +111,6 @@ struct NativeWebView: View {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="\(isDarkMode ? "dark" : "light")">
<style>
* {
box-sizing: border-box;
max-width: 100%;
}
body {
font-family: \(fontFamily);
line-height: 1.8;
@ -135,19 +122,6 @@ struct NativeWebView: View {
-webkit-text-size-adjust: 100%;
-webkit-user-select: text;
user-select: text;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
height: auto;
max-width: 100%;
}
html {
overflow: hidden;
overflow-x: hidden;
height: auto;
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
@ -162,8 +136,13 @@ struct NativeWebView: View {
h3 { font-size: \(fontSize * 9 / 8)px; }
p { margin-bottom: 16px; }
img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 16px 0;
}
a { color: \(isDarkMode ? "#0A84FF" : "#007AFF"); text-decoration: none; }
a:hover { text-decoration: underline; }
@ -190,30 +169,14 @@ struct NativeWebView: View {
padding: 16px;
border-radius: 8px;
overflow-x: auto;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: pre-wrap;
max-width: 100%;
font-family: 'SF Mono', monospace;
}
ul, ol { padding-left: 20px; margin-bottom: 16px; }
li { margin-bottom: 4px; }
table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
margin: 16px 0;
display: block;
overflow-x: auto;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
word-wrap: break-word;
}
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; }
th { font-weight: 600; }
hr { border: none; height: 1px; background-color: #ccc; margin: 24px 0; }