Skip to content

Only apply css hover effect on non-touch devices#5285

Merged
HarelM merged 2 commits intomaplibre:mainfrom
digitaltom:no_hover_css_on_touch_devices
Jan 4, 2025
Merged

Only apply css hover effect on non-touch devices#5285
HarelM merged 2 commits intomaplibre:mainfrom
digitaltom:no_hover_css_on_touch_devices

Conversation

@digitaltom
Copy link
Copy Markdown
Contributor

@digitaltom digitaltom commented Jan 2, 2025

Applying hover effect on touch devices has an undesired effect: The element gets set to hover state on touch and stays like that until the next touch event. Using the :active state gives a nicer feedback by highlighting the button only for the duration of the touch. (fixes #5284)

Before:

screen-20250102-133816.mp4

After:

screen-20250102-211517.mp4

Launch Checklist

  • Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
  • Briefly describe the changes in this PR.
  • Link to related issues.
  • Include before/after visuals or gifs if this PR includes visual changes.
  • [/] Write tests for all new functionality.
  • [/] Document any changes to public APIs.
  • [/] Post benchmark scores.
  • [/] Add an entry to CHANGELOG.md under the ## main section.

Applying hover effect on touch devices has an undesired effect: The element gets set to hover state on touch and stays like that until the next touch event. 
Using the :active state gives a nicer feedback by highlighting the button only for the duration of the touch.
@codecov
Copy link
Copy Markdown

codecov Bot commented Jan 2, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.84%. Comparing base (06e1ab3) to head (1cc8525).
Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5285   +/-   ##
=======================================
  Coverage   91.83%   91.84%           
=======================================
  Files         282      282           
  Lines       38908    38908           
  Branches     6820     6820           
=======================================
+ Hits        35733    35734    +1     
+ Misses       3047     3046    -1     
  Partials      128      128           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@HarelM
Copy link
Copy Markdown
Collaborator

HarelM commented Jan 2, 2025

Can you please a changelog entry?
Looks good otherwise.

@HarelM HarelM merged commit dd93ae9 into maplibre:main Jan 4, 2025
ToHold pushed a commit to ToHold/maplibre-gl-js that referenced this pull request Oct 31, 2025
* Only apply hover effect on non-touch devices

Applying hover effect on touch devices has an undesired effect: The element gets set to hover state on touch and stays like that until the next touch event. 
Using the :active state gives a nicer feedback by highlighting the button only for the duration of the touch.

* add line to changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Control buttons don't reset to inactive style after click on touch devices

2 participants