Translucent/Blur UI element (a bone to pick with..)

[Markyyy]

Hello all.

Is anyone else bothered by the flickering in, for example, the edges of the Safari frosted glass element? Allow me to explain incase you have no idea what I'm referring to...

Say you are viewing a webpage that consists of simply a white background with a black square somewhere in the middle. If you scroll up the page so that the top edge of the square is just about to go off screen, you can still see, although blurry, the top edge of the black square. Scroll up, maybe a couple more pixels, so that the top edge of the black square is touching the display's limits, and you will see that the white background is now unaccounted for by the frosted glass UI effect. Instead of seeing a blurred edge, there is now no evidence that there is an edge there.

Has anyone else noticed and been annoyed by this? The flickering irritates me so badly.

Thanks for hearing me out!

 

[Shrink]

Hello all.

Is anyone else bothered by the flickering in, for example, the edges of the Safari frosted glass element? Allow me to explain incase you have no idea what I'm referring to...

Say you are viewing a webpage that consists of simply a white background with a black square somewhere in the middle. If you scroll up the page so that the top edge of the square is just about to go off screen, you can still see, although blurry, the top edge of the black square. Scroll up, maybe a couple more pixels, so that the top edge of the black square is touching the display's limits, and you will see that the white background is now unaccounted for by the frosted glass UI effect. Instead of seeing a blurred edge, there is now no evidence that there is an edge there.

Has anyone else noticed and been annoyed by this? The flickering irritates me so badly.

Thanks for hearing me out!

Nope, I never noticed it and, therefore, does not annoy me.

No offense, but if you have to go through that whole procedure you outlined just to see this anomaly...just don't do the whole procedure necessary to see the anomaly, and you won't be annoyed by it.

 

[bbfc]

I don't understand what you mean.

 

[Markyyy]

Nope, I never noticed it and, therefore, does not annoy me.

No offense, but if you have to go through that whole procedure you outlined just to see this anomaly...just don't do the whole procedure necessary to see the anomaly, and you won't be annoyed by it.

I didn't go through any procedure. I was just giving an example of the problem in the most stripped down way I could think of (blank webpage with a black square in the middle) but I notice the effect all the time when using Safari just browsing anything. It's distracting.

 

[kmj2318]

It's very noticeable in Safari in Private Browsing, especially on the iPad. It is pretty annoying then. I don't really notice it anywhere else, only when the translucent menu bar is dark.

The problem happens because when the objects are blurred, its color expands past the shape of the actual object underneath. When you scroll the object out of the screen, it's completely gone, and therefore so is the blur, even though the blur ends at a lower spot. That's what causes the flicker. This is kind of hard to explain. The problem is that only things currently underneath the menu bar are blurred, and they drop out of existence when they're scrolled away.

 

[AngerDanger]

Let me see if I can simply the hell out of the OP's example:

When you're scrolling down a page in Safari and some content goes under the top bar, you can see a little bit of it through the bar.

If you scroll a little bit further, it completely disappears despite the fact that—conceptually—it's still under the top bar.

OP, I'm pretty sure this happens because instead of being completely translucent, the toolbar takes the average of the row of pixels right below the toolbar. So when the obscured content is above the top row (under the toolbar), it completely "forgets" that color and moves onto whatever is currently bellow it.

 

[Markyyy]

...OP, I'm pretty sure this happens because instead of being completely translucent, the toolbar takes the average of the row of pixels right below the toolbar. So when the obscured content is above the top row (under the toolbar), it completely "forgets" that color and moves onto whatever is currently bellow it. My take on it is that once a row of pixels leaves the display through the top edge, it is no longer processed by the blur effect. So when the top edge of the square is touching the upper extent of the display, the white background which occupies the -1px row and everything above it doesn't bleed onto the display via the blur effect.

I don't think it's an issue at the lower border of the toolbar. It does however occur as the webpage goes off-screen right at the top.

It seems like such an unnecessary criticism, but when you're actually scrolling, the issue is so much more obvious. Photos seem to get yanked up to the edge of the screen, they kind of distort. Like I said, the flickering is distracting.

 

[applefanDrew]

Wow that bothers you? #

 

[Markyyy]

Wow that bothers you? #

Yeah it really does. Like I said, it's a lot more obvious when you're simply scrolling through a webpage. It creates lots of blotchy flickering at the top of the screen.