wpbakery hover over – front title showing in safari but fine in other browsers

Adding this fixes it in case of Safari 17.2.1 without causing change in Chrome.

body.home .vc-hoverbox-block-inner>* {
backface-visibility: initial;
}

You ROCK! Thank you lovely!

I’ve got this problem too on https://www.flooriq.nl/service/

The text is showing fine in all browsers but Safari on OS X and iOS. The text shows reversed and the text shows on ‘both sides of the flip’.

Wondering if I could ask a quick one too. Maybe someone knows how to solve this one?

Thank you as always!

did you try the CSS fix above? Sorted like a champ for me.

Hi @smoothedit

I tried the CSS fix above. I added it in the Custom CSS option on the page itself and Theme Panel —> Custom CSS but it didn’t work.

did you do a full cache clear? Or adding in ‘?123’ to end of URL?

@smoothedit Yes I tried that, but it makes no difference.

@albert1978 You need to hide .vc-hoverbox-back by default and show it when the parent element gets into :hover state.

The previous solution doesn’t work for you because the conflicted elements are not nested inside each other.

@danex7799 what would be the adjustment to the code above to hide .vc-hoverbox-back by default and show it when the parent element gets into :hover?

@albert1978 the following should work:

.vc-hoverbox-inner:hover .vc-hoverbox-block.vc-hoverbox-back {
opacity: 1;
transition: opacity .5s;
}
.vc-hoverbox-block.vc-hoverbox-back {
opacity: 0;
}

Thanks @danex7799 this worked!

Hi,
I am facing the same issue where the text is overlapping on the hoverbox when viewed in Safari. I am not a developer, can you please assist me with where to enter these codes?

Hi @comepaintworkshops
You could enter these codes in appearance –> customizer –> custom css or if you only want to change the hoverbox presentation on a single page in the WP Bakery page editor of that specific page. In the top right corner you see a gear wheel/sprocket. Click on that and enter the code there. Then click update.

I used this code, it didn’t work ??

.vc-hoverbox-inner:hover .vc-hoverbox-block.vc-hoverbox-back {
opacity: 1;
transition: opacity .5s;
}
.vc-hoverbox-block.vc-hoverbox-back {
opacity: 0;
}

@comepaintworkshops share the link to your webpage where the issue is present.