Skip to content
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.

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

Reader: Fix blinking navigation bar on dark mode in Reader Post #22860

Merged
merged 1 commit into from
Mar 20, 2024

Conversation

dvdchr
Copy link
Contributor

@dvdchr dvdchr commented Mar 19, 2024

Internal ref: pcdRpT-675-p2

In dark mode, the navigation bar on the Reader Post screen could blink as the user scrolls through the content. This PR fixes that issue by removing the navigation bar tint modification based on scroll position when in dark mode.

In 🌝 light mode, the intent was to start with a white tint color for the navigation bar, displayed on top of a featured image having a dark tint. As we scroll past the featured image, the tint color should transition to a dark color (UIColor.text to be exact) to avoid low contrast with the view background.

In 🌚 dark mode, the transition seems a bit buggy. I'm suspecting something unexpected happened to the custom color interpolation logic since we're transitioning from .white to .text (which, in dark mode, results to a white color too!) and sometimes this results in the color being black. To solve this, in dark mode, we actually don't need to transition the color. We can just always keep the .white color!

Here is a preview:

β€’ Before After
Light (should be unchanged) before_light after_light
Dark before_dark after_dark

To test

🌝 Testing light mode

In light mode, the navigation bar should behave as before.

  • Launch the Jetpack app.
  • Ensure that the app is in light mode, or change via Me > App Settings > Appearance.
  • Go to Reader.
  • Select a post with a featured image.
  • πŸ”Ž Verify that the navigation bar tint color starts off with a white color.
  • Start scrolling until you get past the featured image.
  • πŸ”Ž Verify that the navigation bar tint color transitions to a dark color.

🌚 Testing dark mode

  • Launch the Jetpack app.
  • Ensure that the app is in dark mode, or change via Me > App Settings > Appearance.
  • Go to Reader.
  • Select a post with a featured image.
  • πŸ”Ž Verify that the navigation bar tint color starts off with a white color.
  • Start scrolling until you get past the featured image.
  • πŸ”Ž Verify that the navigation bar tint color is still white.
  • Continue scrolling back and forth.
  • πŸ”Ž Verify that the navigation bar tint color stays white and does not "blink" or change colors.

Regression Notes

  1. Potential unintended areas of impact
    Should be none.

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    Manually tested the changes.

  3. What automated tests I added (or what prevented me from doing so)
    N/A.

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist:

  • WordPress.com sites and self-hosted Jetpack sites.
  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t cisn'tte, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@dvdchr dvdchr added the Reader label Mar 19, 2024
@dvdchr dvdchr added this to the 24.6 milestone Mar 19, 2024
@dvdchr dvdchr requested a review from wargcm March 19, 2024 14:17
@dvdchr dvdchr self-assigned this Mar 19, 2024
@wpmobilebot
Copy link
Contributor

WordPress AlphaπŸ“² You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr22860-3c71ae1
Version24.5
Bundle IDorg.wordpress.alpha
Commit3c71ae1
App Center BuildWPiOS - One-Offs #9193
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

Jetpack AlphaπŸ“² You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr22860-3c71ae1
Version24.5
Bundle IDcom.jetpack.alpha
Commit3c71ae1
App Center Buildjetpack-installable-builds #8237
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

Copy link
Contributor

@wargcm wargcm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! :shipit:

@dvdchr dvdchr merged commit 419504d into trunk Mar 20, 2024
25 of 28 checks passed
@dvdchr dvdchr deleted the issue/reader-detail-navbar-blinking branch March 20, 2024 09:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants