WIP: Cart items element: Remove Product button is not displayed in the Safari browser

Bugs
1

Browser: Chrome 110
OS: Windows

Hi team,

If we use a custom position for the “Remove” button, in iPhone browsers the Remove button will only be displayed for the first item in the cart.

Screenshot
Screenshot591×1073 31.7 KB

2

Hi @HOSEIN,

I was able to replicate bug #2 and bug #3, and I’ve created 2 separate tasks, because the issues are not really the same. :slight_smile:

But…

I can’t replicate this one. I’ve tested on my iPhone using Safari and Firefox, but I see the clear icon just fine. Do you have a link to the websites though, where I could check it on iPhone + on which browser you were testing?

Thanks,
Matej

1 Like
3

Hi Matej,

As always, thank you for taking the time to review this report.

Interesting that it’s showing up well for you. It reminded me of this report. I still can’t find a reason why it’s not working on my phone. Because it was working fine for you.

Do you have a link to the websites though, where I could check it on iPhone + on which browser you were testing?

Yes, definitely. Please see my test website.

Thank you

4

Hi @HOSEIN,

I can replicate it on your website :v: What happens is that the “second” remove icon goes all the way up, which means both remove icons are piled up on the first object. I’m not yet sure what the difference is between Safari and other browsers (I was able to replicate the issue on macOS Safari as well).

Could you export the cart template and paste it here for me to test?

Thank you,
Matej

1 Like
5

Great, thank you Matej.

Could you export the cart template and paste it here for me to test?

6

Hi @HOSEIN,

thank you. I was able to replicate it now. Seems like Safari is not respecting position:absolute in this case.

I’ve created a local task for that and connected it to this forum report. But keep in mind that now we have 3 different tasks connected to this forum topic, which means that once we solve at least one, we may set it as solved, although the other two issues are not yet solved. :slight_smile:

Thanks,
Matej

7

Thank you Matej,

Yes, you’re right. I made a mistake not creating separate reports. If it’s not too late, I can do that right now.

8

Hi @HOSEIN,

You don’t need to do it and spend time on creating separate reports again. But if you do, then I’ll properly connect it to internal tasks :smiling_face:, just please tag me in the reports and also include a link to this one.

Thanks,
Matej

1 Like
9

Thanks,

I’ve also updated a link for this task :slight_smile:

Best regards,
Matej

1 Like
10

HI @HOSEIN,

a little update on this one. While working on it, it I notice that this is not a Bricks bug, but a bug in Safari browser. I also found an unsolved WebKit bug report, that you can check it here: 240961 – `position: relative` doesn't work as expected on table row

The reason is, that position:relative is used on table rows, which apparently is not supported on WebKit browsers (Safari), so this happens. Until that is solved, there is not much we can do, unless we create all new elements or refactor this one, so that it’s not using tables… then we would have other (compatibility) issues. :slight_smile:

This is a reason that I’ve marked this topic as no-bug.

Thank you for understanding.
Matej

1 Like
11

Hi Matej,

Thanks for update🙏🏻

1 Like
12

Hi @Matej,

Is there a temporary solution to the problem of displaying the product removal icon in the iPhone browsers?

Best regards

13

Hi @Victor1999,

Sadly, not… or at least I had not found any at the time when I was exploring this issue. So maybe/probably there is some, but I’m not aware of it now.

Best regards,
Matej

1 Like
14

No problem @Matej. Please consider fixing it in the next updates. We have faith in your team.

15

Hi @Victor1999,

this is not really something that Bricks can fix, though (check the WebKit bug above), unless we redesign the (default) table as CSS Grid or some other solution.

However, this would be the same as if you do your own cart loop, which I recommand doing, if you need to set the button to absolute:

Best regards,
Matej

16

Hi @Matej,

Before Bricks, when I was using Elementor, the Jet Woobuilder plugin had a similar option to set the absolute position of the remove cart button. I tested it on iPhone browsers now and it didn’t have the same problem.

To be honest, I didn’t understand what they did when I looked at the front-end code because Elementor’s code is very messy and cluttered. If you think this needs your review, please let me know so I can install and configure it on my test website.

17

Hi @HOSEIN,

hmm… let me chek this task once again. I’ll reopen the internal task about this.

Thank you,
Matej

2 Likes