SOLVED: Issue with Reading Progress Bar?

Bugs
1

Hi,

I have a single template with a div wrapped around all the content (.reading-wrapper).

I then set the Reading Progress Bar “content selector” to .reading-wrapper.

ISSUE
The logic still seems to calculate the whole page (when it should only calculate the height of the content selector), yet the reading bar seems to calculate the content selector (which is correct).

What should happen
Surly the logic and the reading bar should match?

Header

Title
Intro

DIV with .reading-wrapper class wrapping around all ‘single’ content.

DIV with related posts

Footer

When the user scrolls to the bottom of the ‘.reading-wrapper’ (in this case), the scroll bar should reach 100% width of the page, and the user can continue scrolling toward the end of the page, past the related posts, and to the footer.

This is not happening, the reading bar finishes at around 80-90% of the width of the screen, even when scrolling right to the bottom of the page (at the footer).

2

I think I realize what happens…

The reading progress bar reaches the full width of the screen when the bottom of the ‘content selector’ reaches the top of the view port?

3

Hi Dan,
Thanks so much for your report!

This is the expected behavior, right :slight_smile:

Best regards,
timmse

4

Hello, I have one more question; my progress bar does not appear in the safari browser, is this a safari bug or something else?

5

Thanks @timmse,

Yeah, I’ve just checked mine, for Safari, and it looks horrible. Its has a gap for the background (even though it should be transparent), and the bar is the default Blue color when it should be orange?

6

Hey guys,
A live link would be extremely helpful in both cases @mehmettuz @danmurray :slight_smile:

I can confirm that the progress bar in Safari Desktop and on iOS (no matter if Safari or e.g. Chrome) does not use the set styles but instead uses the iOS/Safari default styles. You can temporarily override the behavior with this:

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;
}
2 Likes
7

Works perfectly for me, thanks.

8

Hi Stefan, it is worked on my website, thank you my friend.

9

Hi guys,

We’ve fixed this issue in Bricks 1.9.4, now available as a one-click update in your WordPress Dashboard.
Changelog: Bricks 1.9.4 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like