CODAP-188 Fix Slider gunk issue that occurs in Safari #2273
+34
−7
Conversation
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
…dragging the thumb from right to left * The slider thumb, when pressed, was adding a drop shadow to help the user know that something had taken place. It turns out that Safari doesn't deal properly with erasing the drop shadow when the element moves. The solution is *not* to use a drop shadow at all, but to add a stroke to the SVG that draws the thumb. We do this no matter the browser and I think it looks better than the somewhat confusing drop shadow. * We also note that there was no hover tip for the slider thumb. (There is in V2.) Simply adding a `title` doesn't work due to the way React treats svg. We had to make a ThumbIcon component that renders the svg *and* has its own `title`.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2273 +/- ##
==========================================
+ Coverage 86.47% 86.65% +0.18%
==========================================
Files 721 722 +1
Lines 38431 38436 +5
Branches 9503 9504 +1
==========================================
+ Hits 33234 33308 +74
+ Misses 5188 5119 -69
Partials 9 9
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
codap-v3
|
||||||||||||||||||||||||||||
| Project |
codap-v3
|
| Branch Review |
main
|
| Run status |
|
| Run duration | 02m 04s |
| Commit |
|
| Committer | eireland |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
4
|
| View all changes introduced in this branch ↗︎ | |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes a Safari-specific rendering issue where the slider thumb leaves visual artifacts when dragged from right to left. The solution replaces a CSS drop-shadow effect with an SVG stroke and adds a missing hover tooltip to the thumb.
- Replaced CSS
drop-shadowfilter with SVGstrokestyling to avoid Safari rendering artifacts - Created a new
ThumbIconcomponent to properly support SVG title tooltips - Added hover tooltip to slider thumb using translation key
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| v3/src/components/slider/thumb-icon.tsx | New component that renders the slider thumb SVG with proper title support |
| v3/src/components/slider/slider.scss | Replaced drop-shadow filter with stroke styling for dragging state |
| v3/src/components/slider/slider-thumb.tsx | Updated to use new ThumbIcon component and added tooltip via title prop |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
[#CODAP-188] Bug fix: Slider thumb in Safari leaves gunk behind when dragging the thumb from right to left
titledoesn't work due to the way React treats svg. We had to make a ThumbIcon component that renders the svg and has its owntitle.