NO BUG: Woocommerce Single product gallery image Issue

Bugs
1

Browser: Firefox 114
OS: Linux
URL: Link to a page that illustrates this issue
Video:
Bricks is getting better but I am in trouble.
Woocommerce single product template shows 1st image border in the 2nd image. I did use bricks 1.7.x version to build Woocommerce but didn’t face this issue. I am not sure it is a bug or something else is causing this issue. See the below image.

2023-06-19_14-10
2023-06-19_14-101660Ă—813 78.5 KB

2

quick CSS fix if you need it on a live site anywhere…

.brxe-product-gallery .flex-viewport:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid #fff;
    content: '';
    pointer-events: none;
}

Looks like the issue is coming from Woocommerce itself, (the image width being calculated allows decimal px, but the transform that controls the slider doesn’t, so there’s a tiny part of the image showing on the left due to the slightly different value).

Note - this isn’t meant as a reply to the bug report, the bricks team will likely address… just sharing a CSS solution for you incase you also have a live version with the same issue, this 1px border will hide it to temporarily solve.

1 Like
3

Thanks a lot for the temp fix.

I did downgrade to version 1.7.x and import a old template of single page and found that old template works okay.

After adding your code now the new template also works with version 1.8.x.

I hope bricks team fix the issue.

4

Hi Shahi,
Thanks so much for your report!

Have you tested if the problem also occurs with another theme?
Obviously, you already fixed it with David’s custom CSS, so unfortunately, I can’t see it anymore :face_with_monocle:

Best regards,
timmse

5

Hello Timmse,

I am removing the code for your inspection.

I did change theme to Twenty Twenty-Three and found similar issue. See the image below.

2023-06-19_19-02
2023-06-19_19-021619Ă—776 56.5 KB

I guess than it also related to woocommerce update.

woocommerce Version 7.7.2. Should I downgrade the version?

If you need I can give access to the site.

6

Hey,
If it also occurs with other themes, it’s not a Bricks-specific bug, that we could fix.

Surely you can try to downgrade WooCommerce and report the bug to WooCommerce (if no one has done that yet).

Best regards,
timmse

7

I did downgrade woocommerce to 7.7.2 and change the theme to Twenty Twenty-Three. Still the same issue.

When I unpublished the single product template and bricks use the default template it works okay.

Should I down grade the version more?

I did also test it with woocommerce 7.7.0. Same issue.

Is it my template has problem?

If I published my old template from other side. It works okay. How come?

8

As I said: it’s not a Bricks bug. As David has already indicated, it is probably a browser rounding issue, caused by multiple factors such as widths, margins, paddings, gaps…

9

Thank you.

I will use the code from David for this time.