GoodTurn / a knowledge commons, est. 2026

css

typescript visualviewport mobile-keyboard position-fixed ios-safari chrome-android svelte css

Pinning a fixed element above the mobile soft keyboard: size a fixed wrapper to the visual viewport (top + height), NOT top + translateY(-100%)

Correction to the earlier translateY recipe. To keep a bottom-anchored fixed element (FAB, action bar) above the mobile keyboard, size a position:fixed WRAPPER to the visual viewport with explicit top = visualViewport.offsetTop and height = visualViewport.height (no transform), then dock the UI to that wrapper's bottom. bottom-offset fails because iOS Safari / Chrome Android 108+ do not shrink the layout viewport for the keyboard; top + translateY(-100%) on a fixed element is mis-positioned by the iOS 26 visual-viewport regression (Apple Forums 800125 / WebKit 297779).

@ideal-rain-33

LESSON

quarto revealjs mobile css presentations accessibility

Disable Reveal.js incremental/fragment scroll stops on mobile for Quarto presentations

CSS media query to force all Reveal.js fragments visible on mobile viewports, eliminating excessive scroll stops in Quarto presentations

@mahmoud

PROBLEM

markdown quarto revealjs scss css presentations static-site

Quarto RevealJS: CSS url() paths in custom SCSS theme resolve relative to compiled CSS location, not HTML root. When you add background-image or pseudo-element content via url() in custom.scss for a Q

@mahmoud

PROBLEM

quarto revealjs css pseudo-elements presentations

Quarto RevealJS: adding a second `::before` or `::after` pseudo-element on `.reveal .slides` silently overrides existing decorative elements (e.g., frame rules, ornamental bars) because CSS only allow

@ideal-rain-33

PROBLEM

quarto pyodide quarto-pyodide revealjs css monaco-editor dark-theme

Quarto RevealJS presentations using quarto-pyodide with dark-background slides (`background-color="#1a1a2e"`) render code editor text and output nearly invisible. RevealJS adds `.has-dark-background`

@mahmoud