Dark overlay "leaks" down home page in mobile browsers #72

Closed
joeross opened this Issue Apr 3, 2014 · 8 comments

Projects

None yet

2 participants

@joeross
joeross commented Apr 3, 2014

I plan to check my site's extensions and other code but thought I would mention this to you:

https://www.dropbox.com/s/srrevwf69y009fl/Photo%20Apr%2003%2C%2012%2008%2032%20AM.png

@raamdev
Owner
raamdev commented Apr 3, 2014

I just tested this on a stock install, logged in to the Dashboard with the admin bar at the top as in your screenshot, and visiting the homepage did not display the dark overlay.

That said, I recall seeing that once before during development but wasn't able to recreate it. I assumed it was a caching issue. Can you try clearing your browser cache and, if you have one installed, clear the WordPress cache?

@raamdev
Owner
raamdev commented Apr 3, 2014

I can see on your site that this only happens when the browser hits 800px wide or less, which is a bit strange. Independent Publisher doesn't have any CSS code that gets applied at 800px, however the WordPress Admin Bar does (it becomes a thicker bar, better for mobile devices). What's strange to me is that the dark overlay from the WP Admin Bar is leaking through even when it's not being displayed (i.e., I see it even when I'm not logged into your site).

I tried to recreate this just now on my test installs, but I'm unable to. That tells me it's either a caching issue or related to one of the plugins you have installed.

I'd love to get to the bottom of this. If it's something I can fix in the theme, I'll definitely get that done.

@joeross
joeross commented Apr 7, 2014

I just went through my plugins and of course deactivating Jetpack fixes the
problem. Now I need to dig into Jetpack and try to figure out which module
is messing things up at 800px.

joe ross * joeross.me * 215.253.7146

On Thu, Apr 3, 2014 at 2:18 PM, Raam Dev notifications@github.com wrote:

I can see on your site that his only happens when the browser hits 800px
wide or less, which is a bit strange. Independent Publisher doesn't have
any CSS code that gets applied at 800px, however the WordPress Admin Bar
does (it becomes a thicker bar, better for mobile devices). What's strange
to me is that the dark overlay from the WP Admin Bar is leaking through
even when it's not being displayed (i.e., I see it even when I'm not logged
into your site).

I tried to recreate this just now on my test installs, but I'm unable to.
That tells me it's either a caching issue or related to one of the plugins
you have installed.

I'd love to get to the bottom of this. If it's something I can fix in the
theme, I'll definitely get that done.

Reply to this email directly or view it on GitHubhttps://github.com/raamdev/independent-publisher/issues/72#issuecomment-39486031
.

@raamdev
Owner
raamdev commented Apr 8, 2014

I've narrowed this down to the Jetpack Infinite Scroll module. I can confirm that when that module is loaded, I see a dark overlay:

screen shot 2014-04-08 at 4 13 18 pm

Debugging now.

@raamdev
Owner
raamdev commented Apr 8, 2014

OK, the problem was this bit of code in Jetpack Infinite Scroll's infinity.css (/wp-content/plugins/jetpack/modules/infinite-scroll/infinity.css), specifically the #infinite-handle span style:

/**
 * For smaller viewports, remove the down-arrow icon and turn
 * the button into a block element, spanning the content's full width.
 */
@media (max-width: 800px) {
    #infinite-handle span:before {
        display: none;
    }
    #infinite-handle span {
        display: block;
    }
}

Changing #infinite-handle span to use display: inline; instead of display: block; fixes the dark overlay issue and the Infinite Scroll handle still displays properly.

I'll include this fix in the next theme update, but in the meantime you can add the following to your Child Theme's style.css to fix this issue:

/**
 * Fix issue with dark overlay that appears < 800px with Independent Publisher theme
 */
@media (max-width: 800px) {
    #infinite-handle span {
        display: inline;
    }
}
@raamdev raamdev added the bug label Apr 8, 2014
@raamdev
Owner
raamdev commented Apr 8, 2014

@joeross If you could test that for me to confirm this fixes the issue for you, that would be very helpful! :)

@joeross
joeross commented Apr 8, 2014

@raamdev Fixed! Thanks for your hard work on an awesome theme. 

screenshot 2014-04-08 16 49 04

@raamdev
Owner
raamdev commented Apr 8, 2014

@joeross My pleasure, and thank you for confirming the fix!

@raamdev raamdev added a commit that closed this issue Apr 10, 2014
@raamdev Releasing v1.4
* Fixes #82
* Fixes #75
* Fixes #72
* Fixes #35
ce5fda2
@raamdev raamdev closed this in ce5fda2 Apr 10, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment