search

JulianNorton / subreddit-css

used for /r/web_design and /r/graphic_design
https://www.reddit.com/r/web_design
45 stars 23 forks source link

Banner Viewing Issue #8

Closed purduekenny closed 9 years ago

purduekenny commented 10 years ago

Can you please explain to me, why this theme's masthead has so much trouble with scrolling? I just scrolled back to the top, and half the background is missing from the header. This happened with the previous version too. Now, 2/3 is missing. Now it's all back again. Now a little strip is missing from the bottom left corner.

I'm on a Macbook Pro with an i7, using the latest Chrome. One tab is open and it still does it.

connorshea commented 10 years ago

I think I figured out why this is happening, and was going to open my own bug report, but I suppose that'd be repetitive.

What I believe is happening is that the banner is aligning with the top of the window element (aka viewport/browser window) rather than the document element. Which is why it will work perfectly fine if you don't scroll until everything is loaded, but if you reload the page and scroll down before it can load you get this issue.

I could be wrong, but that's what seems to be happening to me.

EDIT: Nope, nevermind. It seems to have something to do with z-index and the fixed header that shows up when you scroll down?

JulianNorton commented 10 years ago

This is an issue for other /r/naut themes as well, like /r/startup.

jmarikle commented 10 years ago

This is a known issue with retna displays on chrome for mac: https://code.google.com/p/chromium/issues/detail?id=319721#c27. It's a bug when both fixed background-attachment and a fixed element are used (the subreddit has fixed background for #header and a fixed h6 element for "home", "hot", "new", "top" links). My suggestion would be for mac users to ignore it or for someone to switch the background attachment of the header image to scroll. Fixed bg in this context is classier, but honestly, it doesn't make a huge visual difference between having fixed or scroll and I think scroll attachment makes the page run faster.

edit: it doesn't make a huge visual difference in this case because of the nature of the image used.