search

creativetimofficial / ct-material-kit-pro

Premium Bootstrap 4 UI Kit based on Google's Material Design
https://www.creative-tim.com/product/material-kit-pro
128 stars 36 forks source link

[Bug] Incorrect navbar link colors when scroll/toggling transparency #182

Closed kris-guy closed 2 years ago

kris-guy commented 2 years ago

Version

2.2.0

Reproduction link

https://demos.creative-tim.com/marketplace/material-kit-pro/index.html

Operating System

Windows 10

Device

Laptop

Browser & Version

Chrome 99.0.4844.82

Steps to reproduce

  1. Open https://demos.creative-tim.com/marketplace/material-kit-pro/index.html
  2. Scroll down until top navigation transitions (i.e. the "navbar-transparent" class is removed from
  3. Scroll back up to top of page

    What is expected?

    When scrolling down, and navbar class "navbar-transparent" is toggled OFF, the navbar link color should be GREY.

When scrolling back up, and navbar class "navbar-transparent" is toggled ON, the navbar link color should be WHITE.

What is actually happening?

When scrolling down, and navbar class "navbar-transparent" is toggled OFF, the navbar link color should be WHITE.

When scrolling back up, and navbar class "navbar-transparent" is toggled ON, the navbar link color should be GREY.

Solution

Additional comments

  1. When page loads - navigation looks like this: - Full Size
  2. The computed CSS color of the navbar-brand element is #fff / rgb(255,255,255) - shown here: - Full Size

At this point everything is correct

  1. Scroll down until the nav transitions from transparent to white.
  2. The navigation now looks like this - the "navbar-brand" text color is white: - Full Size
  3. The computed CSS color is still #fff / rgb(255,255,255, even though the "navbar-transparent" style specifying that color is removed - see: - Full Size

Reverse issue

  1. Scroll back to the top until nav transitions back to transparent
  2. The navigation now looks like this - the "navbar-brand" text color is grey : - Full Size
  3. The computed CSS color is still #555 / rgb(85,85,85), even though the "navbar-transparent" style specifying the color as #fff / rgb(255,255,255 is present - see: - Full Size

Refreshing / reloading the page resets the colors to "correct", but scrolling again causes the issue to reoccur.

groovemen commented 2 years ago

Hello @kris-guy,

Thank you for using our products and for letting us know about this issue. We will write down for the next product update your solution. Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

groovemen commented 2 years ago

Hello again,

We have updated the product and solved this issue. Thank you for understanding.

All the best, Stefan