Docs

[emptybottle]

Hi there,
there is this sort of “flickering colors” bug when hovering the social icons in the topbar (integrity): take a look at this video, https://dl.dropboxusercontent.com/u/13865572/safari-social-icons-bug.mov
colors of icons are changing almost randomly.
This is only happening in Safari with OS X 10.11 El Capitan, not on previous osx version, not with other browsers, but it isn’t related only to my website, but it also happens in your demos…
My site: http://www.addeditore.it
Demo: http://theme.co/x/demo/integrity/5/

What can I do?
Thanks

[Rad]

Hi there,

Thanks for posting in.

Looks like issues specific to El Capitan’s Safari. More like related to hover and focus and they don’t work well. There is no fix other than this temporary one.

This will trigger the focus event on every social link. Focusing on each link removes the blinking effect. Please add this code to Admin > Appearance > Customizer > Custom > Global Javascript.

jQuery ( document ).ready ( function() {
setTimeout ( function() {
$( '.x-topbar .x-social-global a' ).focus();
}, 300 );
} );

Hope this helps.

[emptybottle]

Thanks for the answer.
The code actually works as it removes the blinking, but it also adds the “focus square outline” to one social icon on first load, in every browser.

[Rupok]

Hi there,

Thanks for updating. Could you keep the suggested code and update us with a screenshot/screenscast that shows the “focus square outline” so that we could suggest you a fix?

Cheers!

[emptybottle]

Hi,
I was talking about the blue square around Pinterest icon… (see image)
(on first load, every browser)
Thanks

[Jade]

Hi there,

Please try adding this code in the customizer:

.x-topbar .x-social-global a {
   outline: none !important;
}

[emptybottle]

Thanks but it doesn’t work, because with that custom css rule the original bug is back again.

[Rad]

Hi there,

It seems to be working on my end. No blinking and outlined focus on my end. Would you mind providing a screen recording? Thanks!

Thanks!

[emptybottle]

Here it is:
https://dl.dropboxusercontent.com/u/13865572/safari-social-icons-bug2.mov
video with & without css code

[Paul R]

Hi,

You can try adding this in custom > css

.x-topbar .x-social-global a {
-webkit-backface-visibility: hidden;
}

Hope that helps

[emptybottle]

Thanks Paul, but it doesn’t work

[emptybottle]

Hi,
I’ve found a solution by myself, if anyone is interested.
No custom js, just this custom css rule:

.x-topbar .x-social-global {
    -webkit-transform: none;
}

And the blinking icon bug is gone.

[Jade]

Glad to hear you found a solution and thanks for sharing. Cheers!

[Alekos Marinos]

This blinking problem was also before El Capitan …
I had exactly the same behavior on Mavericks & Yosemite !

@emptybottle: THX for your help & that you found a quick & easy CSS solution 🙂

THEMECO staff: Maybe you can fix this on upcoming releases ?

[Nabeel A]

Glad this helped you as well. we’ll forward this to our development team so it can be fixed in the future release of X.

Cheers!

[Author]

Posts