Since your theme is different, the solution recommended on the other thread won’t work for you.
To confirm that the issue is indeed linked to your theme, could you switch to one of the default themes for a few minutes and let me know if the problem disappears?
Thanks!
I had the same issue on a storefront child theme.
Adding
.share-icon {
text-rendering: auto;
}
fixed it.
Why can Jetpack not fix this issue as it causes issue with most themes that are not the default theme – a huge number of sites do not use the default theme!
@swansonphotos Unfortunately there is no common solution or fix to that problem. While the CSS you used works for some themes, it doesn’t work for all of them.
Luckily, that problem is limited to a few themes, so that’s something theme authors can work on fixing when it comes up. We’re also happy to work with theme authors directly to help them get this fixed.
Do you still experience the issue on your site? Based on your reply I would assume it is still an issue, and you concluded that it was happening with your theme but not with one of the default themes?
If so, could you let me know what theme you use on your site, so I can try to reproduce? Could you also let me know if you reached out to your theme author about this?
Thanks!
Luckily, that problem is limited to a few themes
Can you please provide some data on that? How do you know that.
Is it not more accurate that most custom designers disregard JetPack for it’s poor design and lack of proper support?
I don’t have any data I’m afraid, only personal experience from supporting Jetpack users like you. The thread you referenced in the original post and this very thread are the only reports we got about this issue so far.
The theme concerned by the original thread, Make, was updated a few weeks later to solve that issue. It looks like the fix also worked for that Storefront child theme mentioned above, but unfortunately it didn’t work for you 🙁
Is your theme a custom-built theme, or a theme you purchased somewhere?
Is it not more accurate that most custom designers disregard JetPack for it’s poor design and lack of proper support?
I would disagree, but you don’t have to take my word for it. 🙂
We do offer support to every Jetpack user, either via email or here in the support forums, whether you use the free version of Jetpack or one of our paid plans.
Most themes, free and premium, are compatible with Jetpack out of the box. Some themes go one step further and actually promote their theme as “Jetpack ready”. The Make theme I mentioned above mentions that it’s compatible with Jetpack in its description. Other themes make use of some of Jetpack’s Theme tools to add extra functionality when Jetpack is active.
All that said, I’m not here to convince you. I just would like to help you get this resolved.
I am compelled to comment on this post https://wordpress.org/support/topic/looking-for-a-theme-that-will-function-for-a-job-recruitment-website/
James commented:
which works with any theme.
He is suggesting, I believe, that a plugin should not cause a theme issue. Themes should not need to be ‘massaged’ to work with plugins, especially those here from the Commercial Branch of WordPress.com (Automattic), such as the default themes are now (and your partners’ theme’s).
If that is true, why are default theme dev.’s or any theme dev.’s needing ‘fix’ the issue with JetPack?
I completely agree with everything you and James said.
That said, sometimes plugin and theme authors need to work together to fix issues, and to figure out what’s causing the conflict and how to fix it. I’d be happy if you could fix the issue you’re facing directly in Jetpack, but that may not be possible. That will depend on what’s causing the issue.
In the other cases above, it turned out that the problem was linked to CSS in each theme, that was overwriting Jetpack’s sharing CSS. That’s unfortunately not something we could have fixed in Jetpack itself, not without using things like !important declarations in our sharing stylesheet, thus making it more complicated for site owners and theme developers to customize the sharing buttons later on.
The problem may not be the same on your site. It could be caused by another conflict between your theme and Jetpack; it could be caused by a conflict between Jetpack and another plugin on your site; it could be caused by something else entirely.
To narrow things down, figure out what’s causing this, and start working on a fix (whether in Jetpack, in your theme, in another plugin, or somewhere else), we would need to run some tests.
The first theme would be to switch to a different theme for a few minutes, and see if the problem persists. If the problem disappears, we’ll know the issue is somewhere between Jetpack and your theme; if the problem remains, we can keep digging and look at other things that may come into play, like plugins.
Could you give that a try and let me know how it goes?
Thanks!
You mean such as in:
/wp-content/plugins/jetpack/css/jetpack.css?ver=4.8.2
Where we see !important many. many times?
#jp-post-flair{padding-top:.5em}#content div.sharedaddy,#main div.sharedaddy,div.sharedaddy{clear:both}div.sharedaddy h3.sd-title{margin:0 0 1em 0;display:inline-block;line-height:1.2;font-size:9pt;font-weight:700}div.sharedaddy h3.sd-title:before{content:"";display:block;width:100%;min-width:30px;border-top:1px solid #ddd;margin-bottom:1em}body.highlander-light h3.sd-title:before{border-top:1px solid rgba(0,0,0,.2)}body.highlander-dark h3.sd-title:before{border-top:1px solid rgba(255,255,255,.4)}.sd-content ul{padding:0!important;margin:0 0 .7em 0!important;list-style:none!important}.sd-content ul li{display:inline-block}.sd-block.sd-gplus{margin:0 0 .5em 0}.sd-gplus .sd-content{font-size:12px}#sharing_email .sharing_send,.sd-content ul li .option a.share-ustom,.sd-content ul li a.sd-button,.sd-content ul li.advanced a.share-more,.sd-content ul li.preview-item div.option.option-smart-off a,.sd-social-icon .sd-content ul li a.sd-button,.sd-social-icon-text .sd-content ul li a.sd-button,.sd-social-official .sd-content>ul>li .digg_button>a,.sd-social-official .sd-content>ul>li>a.sd-button,.sd-social-text .sd-content ul li a.sd-button{text-decoration:none!important;display:inline-block;font-size:12px;font-family:"Open Sans",sans-serif;font-weight:400;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid;
/* end of example so it's not too long here */
Yes, exactly! We’ve used !important in the past but would like to avoid doing so when possible in the future.
At some point we’ll work to remove existing use of !important as well:
https://github.com/Automattic/jetpack/issues/862
https://github.com/Automattic/jetpack/issues/1922
Back to our problem, could you let me know as soon as you’ve run the tests I suggested above, so we can better understand what’s causing the issue on your site?
Thanks!
I wanted to come back to this, as 2 other Jetpack users have reported this same issue yesterday.
We’re looking into this right now, but we may actually get rid of that part of the code in a future Jetpack release, thus resolving the issue in the process. You can follow our progress here:
https://github.com/Automattic/jetpack/issues/7148
I’ll let you know as soon as we make progress on this.
Please also note that I am seeing the issue on a site with a fully custom theme and only when using latest version of Chrome for Windows 10. It is the exact same issue in the ticket. Maybe that is why some folks cannot seem to replicate.
