Lock the chart during playback, fix iOS Safari chrome tinting and input zoom - #10
Open
ironprogrammer wants to merge 2 commits into
Open
Lock the chart during playback, fix iOS Safari chrome tinting and input zoom#10ironprogrammer wants to merge 2 commits into
ironprogrammer wants to merge 2 commits into
Conversation
It described the plugin's local test loop as wp-now, which was superseded by the WordPress Playground CLI before the feature shipped. The README's "Test locally" section is the current instructions, so the plan file was only left to contradict them.
Three fixes that all showed up while running a song on a phone. Nothing is editable during playback any more. The song name and key were still live, as were a part's name, cue and sample URL; the rest of the meta was already gated on `playing`. Open part editors also collapse when playback starts and the settings button is disabled, so the expanded panel can't push the parts you're reading off the screen mid-song. Disabled inputs keep their full ink color -- playback is exactly when the chart has to be readable, and WebKit greys disabled text through -webkit-text-fill-color, which color and opacity alone don't override. The beat flash no longer paints the browser chrome. Safari 26 ignores theme-color and instead tints the status bar and toolbar by sampling fixed/sticky elements near the viewport edges, so the full-viewport flash overlay became the candidate at both edges: orange bars top and bottom for the whole of playback, or white ones when it sampled the gradient's transparent background-color. The overlay is now display:none between beats rather than opacity 0 -- Safari reads the background off a hidden fixed element -- and the color moved to an absolutely positioned child so the fixed wrapper has nothing to sample even mid-beat. html/body get the app's paper background so the fallback tint isn't white, which also drops the 8px UA body margin that was showing as a white gutter at those same edges. Text fields are 16px on touch. Below that iOS zooms the page in on focus and doesn't zoom back out on blur, leaving you panning around a magnified chart.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three fixes found while running a song on an iPhone.
Nothing is editable during playback
The song name and key were still live, as were a part's name, cue and sample URL — the rest of the song meta was already gated on
playing. All now respect it.Open part editors also collapse when playback starts, and the settings button is disabled so they can't be reopened mid-song; that panel isn't useful while playing and pushes the parts you're actually reading off the screen.
Disabled inputs deliberately keep their full ink color. Playback is exactly when the chart has to be most readable, and WebKit greys disabled text via
-webkit-text-fill-color, whichcolorandopacityalone don't override — without that override the part names wash out mid-song on iOS.The beat flash no longer paints the browser chrome
Safari 26 ignores
theme-colorand instead tints the status bar and toolbar by samplingposition: fixed/stickyelements near the viewport edges. The full-viewport flash overlay was the candidate at both edges, so playback with flash enabled turned the browser chrome into solid orange bars above and below the page — or white ones, when Safari sampled the off-beat gradient's transparentbackground-color.display: nonebetween beats rather thanopacity: 0. Safari reads the background off a hidden fixed element, so opacity alone wasn't enough.html, bodyget the app's paper background, so the fallback tint isn't white. This also drops the 8px UA body margin, which was showing as a white gutter at those same edges.index.htmlis the production shell too —class-app.phpserves the built file verbatim — so this applies in WP mode.The flash itself is visually unchanged. A brief tint at the bottom edge remains during each flash, which is Safari sampling the layer while it's actually displayed; accepted as is.
Text fields are 16px on touch
Below 16px, iOS zooms the page in when a text field takes focus and doesn't zoom back out when it blurs, leaving you panning around a magnified chart mid-song. Scoped to
(pointer: coarse)so desktop sizes are untouched, and selects are exempt since they open a picker rather than a keyboard. Cue notes read noticeably larger on the phone as a result — a deliberate trade.Testing
Verified on an iPhone 16 Pro against the dev server over LAN, plus computed-style checks in the browser for the disabled and font-size cascades.
npm run test:unitpasses 9/9.Not covered here: song switching and deletion are still possible mid-playback — #9.