In Safari v16.4 on Macs running OS Ventura, the portfolio hover text is only appearing briefly when hovering and then disappearing. Sometimes it works correctly, but simply refreshing the page creates the issue again. The problem does not occur in Chrome.
I have tried removing custom css, and deactivating plugins, to no avail. I have also found that I can "trick" it into displaying correctly again by right-clicking anywhere on the page and then deselecting—which is weird, but perhaps telling.
Try adjusting the minification order in the Optimization plugins and check. Also try turning it off to confirm if the minification is causing this issue?.
Adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab should correct that Safari-specific rendering issue:
I already tried adding the !important tags yesterday, and have just tried again with your code—unfortunately still not resolved.
While testing I have discovered some parameters that are triggering the issue—in the case of this website the portfolio items are using Custom Thumbnail Image within the Project Configuration. If I remove the custom thumbnail and use Featured image instead it fixes the issue for that portfolio item.
Hello
In Safari v16.4 on Macs running OS Ventura, the portfolio hover text is only appearing briefly when hovering and then disappearing. Sometimes it works correctly, but simply refreshing the page creates the issue again. The problem does not occur in Chrome.
https://l-ldesign.com.au
I have tried removing custom css, and deactivating plugins, to no avail. I have also found that I can "trick" it into displaying correctly again by right-clicking anywhere on the page and then deselecting—which is weird, but perhaps telling.
Any help would be appreciated.
Mike
Hey Again,
Try adjusting the minification order in the Optimization plugins and check. Also try turning it off to confirm if the minification is causing this issue?.
Thanks.
ThemeNectar Support Team
Hi Tahir
I switched off Minify in W3 Total Cache, and even deactivated the plugin completely, but unfortunately that didn't work.
Mike
Escalating this to the developer so this can be tested on an actual device.
Thanks
ThemeNectar Support Team
Hey Mike,
Adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab should correct that Safari-specific rendering issue:
body .portfolio-items .col .work-info .vert-center { -webkit-transform: translateY(-50%) translateZ(0); transform: translateY(-50%) translateZ(0); }Kind regards
Hey there
Sorry, that doesn't resolve the issue either.
Mike
Please try the revised CSS below and check.
body .portfolio-items .col .work-info .vert-center { -webkit-transform: translateY(-50%) translateZ(0) !important; transform: translateY(-50%) translateZ(0) !important; }Thanks
ThemeNectar Support Team
Hi Tahir
I already tried adding the !important tags yesterday, and have just tried again with your code—unfortunately still not resolved.
While testing I have discovered some parameters that are triggering the issue—in the case of this website the portfolio items are using Custom Thumbnail Image within the Project Configuration. If I remove the custom thumbnail and use Featured image instead it fixes the issue for that portfolio item.
Hopefully this helps with troubleshooting.
Mike
Escalating this again.
Thanks
ThemeNectar Support Team
Hey Mike, sorry about that -- here's a new snippet that should sort it:
.portfolio-items[data-ps="2"] .col .work-info .vert-center { -webkit-transition: opacity 0.2s ease-out, transform 0.2s ease-out; transition: opacity 0.2s ease-out, transform 0.2s ease-out; -webkit-transform: translateY(calc(-50% - 20px)) translateZ(0); transform: translateY(calc(-50% - 20px)) translateZ(0); margin-top: 0; } .portfolio-items[data-ps="2"] .col .work-item:hover .work-info .vert-center { -webkit-transform: translateY(-50%) translateZ(0); transform: translateY(-50%) translateZ(0); } .portfolio-items[data-ps="2"] .col .work-item .work-info .vert-center > * { opacity: 1; }Kind regardsPerfect—thank you!