front page featured images not appearing on safari

Hi there,

I can see all the featured images on the link you provided.
Can you connect to a different network and clear the browser caches?

Strangely despite changing network, the images are still not appearing on my mac but seem to work on a mobile device

Hi Puneet,

What version of Safari are you using? Take note that older versions of Safari don’t support Webp images.

My macbook’s Safari isn’t updated as well. Thus, viewing your site on Safari doesn’t show the images, but viewing it from Chrome does.

Reference to Webp images support: https://caniuse.com/webp

Kindly let us know. :)

I am on the latest version on all devices and am using an M1 chip MacBook with the latest update. It wasn't a problem till yesterday. The images are opening fine within posts etc. as well, and the first post appears fine as well on the front page. They all have been uploaded in webp format. I will probably wait a while. It might be a local network cache issue but still bizarre as I haven't seen something like this before. I have set single posts to narrow 800 px width, though. I don't know if it has anything to do with this?

While I am waiting, could I also ask how to add a shadow spread below my website header? I think it can be done through generateblocks pro but I am being a bit lazy here as I would probably keep my header simple and just need a shadow spread below it. So CSS would do.
site: manoftech.com

Also, it would be super helpful if you can guide me to a link and hover effect with CSS, like the one you can see on the URL below. The effect here is applied on the breadcrumbs but I would want to on the links in just single posts and not the entire website. The URL for example is:
https://variety.com/2022/tv/news/netflix-loses-subscribers-q1-earnings-1235234858/

Thanks and regards,
Puneet

I see. Perhaps it is indeed a device isolated issue. Perhaps you could try restarting your laptop?

With regards to the shadow of the header, you can try adding this CSS in Appearance > Customize > Additional Css:

nav#site-navigation{
    position:relative;
}

nav#site-navigation::after {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    box-shadow: 0 10px 10px black;
}

With regards to the links:

.single-post .entry-content a::after {
    content: "";
    width: 100%;
    height: 30%;
    background-color: rgb(230,230,0);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.single-post .entry-content a {
    position: relative;
    z-index: 200;
    background-color: transparent;
    text-decoration: none;
    color: #000;
}

.single-post .entry-content a:hover::after {
    height: 100%;
}

Kindly replace the values to your preference.

Hope this helps! Kindly let us know how it goes. :)

Thanks, Fernando,
Almost perfect with just 2 issues:-

1. The link CSS leaves the yellow highlight on social share buttons as well. Is there a way, social share buttons could be excluded? Below is the screenshot:-
https://snipboard.io/zLOy4D.jpg

2. With the header shadow spread CSS the logo becomes unresponsive, by which I mean if I take my cursor there the logo stops acting as a link.

You can check both on the following post:-
https://manoftech.com/apple-releases-imovie-3-0-featuring-storyboards-and-magic-movie/

Regards,
Puneet

Found another problem with the link CSS. On mobile, the yellow underline appears on the link partially or maybe just under a word in the Also Read section.

Give these two alternative methods a try:

1. Underline hover links:

.entry-content p a:not([href="#"]) {
	--grad-stop: 30%;
	background: linear-gradient(0deg, rgba(254,254,0,1) var(--grad-stop), rgba(254,254,0,0) var(--grad-stop));
}
.entry-content p a:not([href="#"]):hover {
	--grad-stop: 100%;
}

Note this: :not([href="#"]) - that will exclude the social links and any other link that only has a # in its href.

2. Add the box shadow to the nav and mobile header:

#site-navigation, #mobile-header {
    position: relative;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.26);
}

Thanks David,
Almost there. The only thing missing is that the original underline doesn't go away. The links now have the underline from the default and 30% yellow both. Just need to take off the original underline.

The Header one is working perfectly.

Regards,
Puneet

In Customizer > General set the Under Links to Never

Thanks again David,
Been using Generatepress for over six months now and never saw that setting...lol. Thanks again, David and Fernando. Superb and exceptional support like always.

Regards,
Puneet

Glad we could be of help!

Hi
Just adding this information here in case someone else faces a similar problem of front page featured images not appearing on macOS and iPad safari. The problem was due to WP-Rocket image lazy loading. With that disabled, everything is working fine.

Thanks and Regards,
Puneet

Thanks for the feedback - might be worth reporting that to WP Rocket :)