NTP - Fix blurry customizer text on Windows

[moon0326]

Asana Task/Github Issue:

https://app.asana.com/1/137249556945/project/1211592734365220/task/1211664088579926

Description

• Fix blurry text in the Customizer on Chromium-based Windows browsers

Background

It seems there’s a bug in Chromium engine where animated elements become blurry in certain situations. Firefox does not have the same issue.

See: https://issues.chromium.org/issues/40431598#comment104

The issue has been fixed, but some users still report that it occasionally occurs.

I understand it’s related to opacity and animation, but I don’t fully grasp what’s happening internally, to be honest :(

Since visibility is set to hidden at 0%, opacity has no effect. I removed it to fix the blurriness issue. I don't see any visual difference after removing it.

Before & After:

Testing Steps

Make sure your display scale is set to 100%. I wasn't able to reproduce the issue at 200% or 300% scale.

1. Checkout this branch.
2. Navigate to special-pages directory and run npm run watch -- --page new-tab
3. Add ?platform=windows to the URL and open it in Windows using the Canary version of DuckDuckGo browser.
4. Click “Customize”
5. Verify that the texts are not blurry.
6. Open CustomizerDrawerInner.module.css file and reapply the opacity changes.
7. Reload the page and compare the results.

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

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	86632f8
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/68f96ee155b0780008933099
😎 Deploy Preview	https://deploy-preview-2030--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle 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]

Temporary Branch Update

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

• Branch Name: pr-releases/pr-2030
• Commit Hash: 678ae3d38d84cec52656c3b9a1c72316277d6281
• Last Updated: October 23, 2025 at 12:41:35 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#678ae3d38d84cec52656c3b9a1c72316277d6281

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

[github-actions]

[Beta] Generated file diff

Time updated: Thu, 23 Oct 2025 00:42:01 GMT

Apple

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

File has changed

Integration

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

File has changed

Windows

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

File has changed