christian/bible-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browser tab: no focus highlight on the page

Browse Source 
Every key on the app's keyboard takes focus from the page for a moment and
gives it back, so the site's focus ring (a 2px blue outline on the search
box, and a brighter border) flashed with each letter. Outline rings are
turned off with the page's clean-up CSS, and the guest preload strips
outline, border and box-shadow from the site's own :focus / :focus-within /
:focus-visible rules, keeping anything else those rules do.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
christian
2026-10-22 09:28:59 -04:00
co-authored by Claude Opus 5.5
parent 0f9c468b1e
commit e1f541d366
3 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser-tab.js
+7 -4
View File
@@ -41,15 +41,18 @@
var RETRY_MS = 10000;
/*
* The page itself is the only thing on screen: no scrollbars, no blue tap flash, no text selection from
* a resting finger, and no rubber-band pull that would drag the whole page (or, sideways, swipe back a
* page). Inputs keep their selection so typing still behaves. Applied to the live page with insertCSS
* and to the booth's copy as a <style>, so both screens look the same.
* The page itself is the only thing on screen: no scrollbars, no blue tap flash, no focus ring, no text
* selection from a resting finger, and no rubber-band pull that would drag the whole page (or, sideways,
* swipe back a page). Inputs keep their selection so typing still behaves. Applied to the live page with
* insertCSS and to the booth's copy as a <style>, so both screens look the same. (The ring matters
* twice: every key on the app's keyboard takes focus from the page for a moment, so a ring would flash
* with each letter. The site's other focus styles are taken out by browser-guest-preload.cjs.)
*/
var CLEAN_CSS =
'html,body{scrollbar-width:none!important;overscroll-behavior:none!important;}' +
'::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}' +
'*{-webkit-tap-highlight-color:transparent!important;}' +
':focus,:focus-visible{outline:none!important;}' +
'body *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;}' +
'input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text!important;user-select:text!important;}';