GP Premium / Woocommerce: Single Product page on Safari

Oh yes ... I forgot to mention that this effect only happens if the product is out of stock.

Another comment: when the GP Premium module is deactivated it looks okay.

Hi there,

What version of Safari are you using? I'm not able to see the issue on my end.

Let me know :)

Hi Tom

Safari 13.1 on Catalina 10.15.4

First loading seems fine. Please try a reload. Then it starts becoming weird. I tested on 3 different Macs.

iPad OS 13.4.1 same behavior.

Thanks

Tough one to debug - it snaps back whenever something in dev tools is changed.

Was trying to replicate on one of our Woo sites with no luck: https://gpsites.co/seller/product/happy-ninja/

Is it happening there for you?

Okay, now it gets really weird.

What I did:

1. I checked your page and your page looked fine for me.
2. I deactivated my child theme and switched to basic GP. Looked fine.
3. Back to child theme > broken.
4. Deactivated my functions.php modifications > broken
5. Fresh child theme style.css > broken
6. Checked and turned on every custom css line by line. Then I saw that I had some css left from the product page sidebar I once used. Removed it > broken
7. Turned in GP customizer "Layout - Woocommerce - Single Product" content/right sidebar on > not broken
8. Switched back in GP customizer "Layout - Woocommerce - Single Product" to content/no sidebar > works

Since the last step it works. I had "Layout - Woocommerce - Single Product" to content/no sidebar all the time, but somehow turning it off and on again fixed my issue.

Okay, so I went back to the test page and tried to replicate it.

Seems it has something to do with the customizer setting combined with the template's css code (template Merch). Again, only Safari. I guess David is the template author.

/*-- Right Sidebar --*/
@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid rgba(0,0,0,0.1);
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid rgba(0,0,0,0.1);
    }
}

/* Single Product Sidebar position */
@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

@media (max-width: 768px) {

    .wc-columns-container .products,
    .woocommerce .related ul.products,
    .woocommerce .up-sells ul.products {
        grid-gap: 20px;
    }
	
		.slideout-navigation.do-overlay .slideout-exit {
    	position: static;
    	text-align: center;
		}
}

Sorry for the long posting. But your test page helped me on my search to replicate it. Removing above CSS code and going for no sidebar on the single product page (which I wanted) fixed it.

Hi there,

Merch used a GP Hook Element to add the Sidebar inside of the Woo Single Product template and that CSS is required to create the Merch single product layout.

Where do you want to add the Sidebar : In the default layout or the Merch layout ? Let me know.

Hi David

I use the Merch template as basis and wanted to get rid of the sidebar on the single product page. So I deactivated it in the customizer settings, but didn't delete the CSS for it. This caused this weird rendering on Safari.

For me it's good now and we can close this ticket.

Thanks

Oh, I can mark this topic as resolved by myself.

Glad to hear that :)