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

fix: Add comprehensive width constraints to NativeWebView CSS

Browse Source 
Added multiple CSS rules to prevent content overflow:

Universal rules:
- * { max-width: 100%; box-sizing: border-box; }

HTML/Body:
- overflow-x: hidden on both html and body
- width: 100% to enforce viewport width
- word-wrap and overflow-wrap: break-word on body

Pre blocks:
- max-width: 100%
- white-space: pre-wrap (allows wrapping)
- word-wrap: break-word

Viewport meta:
- Added maximum-scale=1.0, user-scalable=no to prevent zooming issues

The native iOS 26+ WebView handles width differently than WKWebView,
requiring explicit overflow and width constraints in CSS.
This commit is contained in:
Ilyas Hallak 2025-10-10 20:18:38 +02:00
parent 615abf1d74
commit 4c744e6d10
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
readeck/UI/BookmarkDetail/BookmarkDetailLegacyView.swift
View File

@ -115,6 +115,7 @@ struct BookmarkDetailLegacyView: View {
}
}
.coordinateSpace(name: "scrollView")
.clipped()
.ignoresSafeArea(edges: .top)
.scrollPosition($scrollPosition)
.onPreferenceChange(ScrollOffsetPreferenceKey.self) { offset in

6
readeck/UI/BookmarkDetail/BookmarkDetailView2.swift
View File

@ -46,6 +46,7 @@ struct BookmarkDetailView2: View {
// Main scroll content
scrollViewContent
}
.navigationBarTitleDisplayMode(.inline)
.toolbar {
toolbarContent
@ -100,20 +101,15 @@ struct BookmarkDetailView2: View {
VStack(spacing: 0) {
ZStack(alignment: .top) {
// Header image (in background)
headerView
// Content (in foreground)
VStack(alignment: .leading, spacing: 16) {
// Spacer for header
Color.clear.frame(width: geometry.size.width, height: viewModel.bookmarkDetail.imageUrl.isEmpty ? 84 : headerHeight)
// Title section
titleSection
Divider().padding(.horizontal)
// Jump to last position button
if showJumpToProgressButton {
jumpButton(containerHeight: geometry.size.height)
}

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

@ -108,9 +108,19 @@ struct NativeWebView: View {
let styledHTML = """
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="color-scheme" content="\(isDarkMode ? "dark" : "light")">
<style>
* {
max-width: 100%;
box-sizing: border-box;
}
html {
overflow-x: hidden;
width: 100%;
}
body {
font-family: \(fontFamily);
line-height: 1.8;
@ -122,6 +132,10 @@ struct NativeWebView: View {
-webkit-text-size-adjust: 100%;
-webkit-user-select: text;
user-select: text;
overflow-x: hidden;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
@ -169,6 +183,9 @@ struct NativeWebView: View {
padding: 16px;
border-radius: 8px;
overflow-x: auto;
max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'SF Mono', monospace;
}