fix: Remove iOS edge-fade mask on embedded editors#83
Conversation
Obsidian applies -webkit-mask-image on .view-content and .workspace-leaf-content for scroll edge-fade effects. In the embedded Daily Notes Editor leaf structure, this causes the first ~2 lines of each editor to render with progressively reduced brightness on iOS. Disable masks and pseudo-element overlays on the embedded editor layers to fix.
There was a problem hiding this comment.
Pull request overview
This PR fixes an iOS-specific rendering issue where Obsidian's edge-fade mask effects cause the first 2-3 lines of embedded editors to appear progressively dimmer. The fix disables webkit mask properties and pseudo-element overlays on the embedded editor components used by the Daily Notes Editor plugin.
Changes:
- Added mask property resets to
.dn-editor .view-contentto disable edge-fade effects - Added mask property resets to
.dn-editor .workspace-leaf-contentto disable edge-fade effects - Added pseudo-element display disabling for
::beforeand::afteron view and leaf content elements - Added mask property resets to
.dn-editor .cm-scrollerto ensure consistent rendering
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .dn-editor .cm-scroller { | ||
| padding: 0 !important; | ||
| overflow-y: clip; | ||
| -webkit-mask: none !important; | ||
| -webkit-mask-image: none !important; | ||
| mask: none !important; | ||
| mask-image: none !important; | ||
| } |
There was a problem hiding this comment.
The selector .dn-editor .cm-scroller is defined twice in this file (first at lines 5-8, then here at lines 59-66). This creates duplicate selectors with conflicting padding rules: padding: unset; at line 7 and padding: 0 !important; at line 60. Consider consolidating these rules into a single selector block to improve maintainability and avoid confusion about which padding rule applies.
- Format note headers as "dddd, MMMM Do YYYY" instead of raw filename - Add conditional backlinks (only show when file has actual backlinks) - Add spacing before backlinks section (margin-top: 2em) - Fix mobile text fade effect on embedded editors (PR Quorafind#83) - Integrate hide future dates setting (PR Quorafind#54) - Integrate auto-focus today's note + switch to existing editor (PR Quorafind#77) - Fix iOS scrolling by never unloading rendered editors - Add scroll event listener fallback for iOS infinite scroll reliability - Add settings: hideUnreachedDates, autoFocus, switchToExisting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary
Obsidian applies
-webkit-mask-imageon.view-contentand.workspace-leaf-contentto create scroll edge-fade effects. In the embedded leaf structure used by Daily Notes Editor, this causes the first ~2 lines of each editor to render with progressively reduced brightness on iOS.The fix disables masks and pseudo-element overlays on the embedded editor layers:
.dn-editor .view-content.dn-editor .workspace-leaf-content.dn-editor .cm-scrollerThis only affects the embedded editors inside the plugin, not Obsidian's normal views.
Before / After (iOS)
Before: first lines are visibly dimmer, progressive fade from line 1 to ~line 3
After: all lines render at c
onsistent brightness