Skip to content

NTP: Fix Omnibar TabSwitcher icon shifting by 1px when animating in WebKit #1822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 15, 2025
Merged

NTP: Fix Omnibar TabSwitcher icon shifting by 1px when animating in WebKit #1822

merged 1 commit into from
Jul 15, 2025

Conversation

noisysocks
Copy link
Contributor

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210785568574508?focus=true

Description

In Safari/WebKit, toggling between the Search and Duck.ai tabs causes the icon to shift by 1px. Likely due to a subpixel / compositing bug. Adding will-change seems to fix it.

Testing Steps

  1. Go to https://deploy-preview-1822--content-scope-scripts.netlify.app/build/pages/new-tab/?omnibar=true in Safari or DuckDuckGo on macOS.
  2. Toggle between the Search and Duck.ai tabs. Icon in the tab switcher should not move.

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

@noisysocks noisysocks added the bug Something isn't working label Jul 15, 2025
@noisysocks noisysocks requested review from shakyShane, mgurgel and a team as code owners July 15, 2025 01:40
@netlify Netlify
Copy link

netlify bot commented Jul 15, 2025 •
edited
Loading

✅ Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit 34f782e
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/6875b184e1a8900008741abd
😎 Deploy Preview https://deploy-preview-1822--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions GitHub Actions
Copy link

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

@github-actions GitHub Actions
Copy link

[Beta] Generated file diff

Time updated: Tue, 15 Jul 2025 01:41:18 GMT

Integration 
    - integration/pages/new-tab/dist/index.css

File has changed

Windows 
    - windows/pages/new-tab/dist/index.css

File has changed

Apple 
    - dist/pages/new-tab/dist/index.css

File has changed

@noisysocks noisysocks merged commit 2e637c0 into main Jul 15, 2025
19 checks passed
@noisysocks noisysocks deleted the randerson/fix-webkit-omnibar-tab-icon-shift branch July 15, 2025 09:38
mallexxx pushed a commit that referenced this pull request Jul 17, 2025
@noisysocks
Fix TabSwitcher icon shifting by 1px when animating in WebKit (#1822)
687bc8f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@shakyShane shakyShane shakyShane approved these changes

@mgurgel mgurgel Awaiting requested review from mgurgel mgurgel is a code owner

Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@noisysocks @shakyShane