Repository navigation
[2.x] fix: Open the discussion controls in one tap on touch tablets - #4992
Merged
Merged
Conversation
On a touch device wide enough for the tablet-up layout - an iPad - the per-discussion controls (the ⋮ menu) are revealed only on :hover, which a touch screen has no equivalent for. Safari fakes it with a priming tap: the first tap applies the hover state and reveals the controls but is swallowed, so the menu only opens on the second tap. Show the controls and their toggle for touch devices at tablet-up widths, so a single tap opens the dropdown. Pointer devices keep the hover-to-reveal behaviour unchanged.
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
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.
Changes proposed in this pull request:
On a touch device wide enough to get the tablet-up layout — an iPad — the per-discussion controls (the
⋮dropdown) are hidden withopacity: 0and revealed only on:hover. A touch screen has no real hover, so iOS Safari fakes one with a "priming tap": the first tap on the control applies the hover state (revealing it) and is swallowed, and only the second tap actually opens the dropdown. The result is that the⋮menu needs two taps on iPad, but only when logged in (guests have no controls to reveal). It reproduces on discuss.flarum.org.This shows the controls and their toggle for touch devices at tablet-up widths, inside the existing
@media (any-hover: none)block, so a single tap opens the dropdown. Pointer devices keep the hover-to-reveal behaviour exactly as before — the change is scoped to(any-hover: none) and (min-width: <tablet>).Fixes #39568.
Reviewers should focus on:
any-hover: none.Necessity
⋮menu needs two taps on iPad because it's gated behind:hover.any-hover: noneis the standard way to separate touch from hover; a JS tap handler would be heavier for a purely presentational issue.Confirmed
@media (any-hover: none) and (min-width: …)via the runtime compiler; behavioural confirmation on a physical iPad is still worth a look (see below).Required changes: