fix(app): correct 1px video shift on desktop Safari too (#813) - #1813
Open
johan-bell wants to merge 1 commit into
Open
fix(app): correct 1px video shift on desktop Safari too (#813)#1813johan-bell wants to merge 1 commit into
johan-bell wants to merge 1 commit into
Conversation
The video renders 1px lower than its absolutely-positioned container on Safari, leaving a 1px gap at the top and an overhang at the bottom. This happens on Safari on both macOS and iOS, but not on Chrome/Firefox. Apply the -1px correction via a `.safari-shift-fix` class toggled from the component using video.js's browser detection (IS_SAFARI || IS_IOS) — the same source already used for nativeAudioTracks — so it covers desktop macOS Safari, not only iOS.
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.
Re-opens #813 — the 1px downward video shift is back on desktop (macOS) Safari.
Problem
.video-playeris absolutely positioned, and Safari renders the video 1px lower than that container — a 1px gap at the top and an overhang at the bottom. This affects Safari on both macOS and iOS, but not Chrome/Firefox.The existing correction was gated behind
@supports (-webkit-touch-callout: none), which only matches iOS —-webkit-touch-calloutisn't supported by desktop macOS Safari, so the −1px correction never applied there. That's the "safari web" case in the screenshot on the issue.Fix
Drive the correction off the platform, not a CSS feature query. The component sets an
isSafariRenderingflag from video.js's own browser detection (videojs.browser.IS_SAFARI || IS_IOS) — the same source already used fornativeAudioTracks— and toggles a.safari-shift-fixclass. The CSS appliestransform: translateY(-1px)to that class.This covers desktop macOS Safari and iOS, and excludes Chrome/Firefox (which don't have the shift, so they must not be nudged).
Tests
VideoPlayer.spec.ts: 12/12.type-check+ eslint clean.This is a Safari-specific rendering fix and I can't drive macOS/iOS Safari in this environment, so it's verified by reasoning + the existing unit suite, not visually on Safari. Worth a 10-second look before merge: open a video in desktop Safari and confirm the 1px gap/overhang is gone, and in Chrome confirm nothing moved (no new 1px misalignment).
videojs.browser.IS_SAFARIis the same detection the player already trusts, so the risk is low — but low isn't verified.