Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blank screen after removing item from cart directly after it was added #68

Open
marcoveeneman opened this issue Apr 3, 2021 · 8 comments
Open

Blank screen after removing item from cart directly after it was added #68

marcoveeneman opened this issue Apr 3, 2021 · 8 comments

Comments

@marcoveeneman
Copy link

marcoveeneman commented Apr 3, 2021 •
edited
Loading

Hi,

I encountered a weird issue when doing some exploratory testing. With offcanvas minicart enabled, adding a product to the cart and immediately removing it again leaves the customer with a blank page. Looking in the page style it seems the body._has-modal overflow: hidden; is causing it. When a product from somewhere at the top of a page is added only part of the screen is blank.

Steps to reproduce:

  • Scroll down on a page with products
  • Add a product to cart, (offcanvas minicart opens)
  • Remove the item from the cart, (screen turns blank)
  • Open a web inspector and look for the <body> element.
  • Look for the body._has-modal style and disable overflow:hidden
  • Page is visible again

My system is running the following:

  • macOS Catalina 10.15.7 (19H2)
  • Safari 13.1.3 (15609.4.1)

I tried the same steps in Google Chrome and Firefox, that just works fine, no issues there.

Running the same steps on macOS BigSur 11.2.3 with Safari 14.0.3 (16610.4.3.1.7) shows no issues.

Details on the installation:

  • Magento 2.4.1-p1
  • Magesuite v7.0.0
  • theme-creativeshop v11.0.2
  • PHP7.4.8
  • MySQL 8.0
@marcoveeneman
Copy link
Author

marcoveeneman commented Apr 3, 2021 •
edited
Loading

I added a screenshot of the issue, maybe it helps. The red text shows the style which is causing the blank screen.
image

@mborkowski
Copy link

Hi @marcoveeneman
Nice description, I wish to have such well prepared report for every issue we get. Thanks for that 🥇.
I'll try to take a look at this in upcoming days, however if there will be no quick-fix for this issue and it will force some deeper changes, we might decide to give up on this due to narrow browser scope.

@marcoveeneman
Copy link
Author

Hi @mborkowski

Thanks for the nice words, i'm happy to help 😄 I hope you manage to find the problem. If there is anything you need from my side just let me know.

@groomershop-mt
Copy link
Contributor

groomershop-mt commented Aug 18, 2021 •
edited
Loading

We have similar problem, but not directly with blank screen. After upgrade to iOS 14.7.1 customers do not see the mini cart - they only see the part with height equal to header and nothing more, so they can't go to checkout.

We have made a temporary solution with changing size of offcanvas (exactly overlay and drawer) from 100% to 100vh by creating in our theme file src/components/offcanvas/offcanvas.scss:

@import 'config/variables';
@import 'vendors/include-media';

@import '../../../../theme-creativeshop/src/components/offcanvas/offcanvas';

.#{$ns}offcanvas {
    $root: &;

    &__overlay {
        #{$root}--mini-cart & {
            height: 100vh;
        }
    }

    &__drawer {
        #{$root}--mini-cart & {
            height: 100vh;
        }
    }

}

@mborkowski
Copy link

Sorry for late reply. In one of our projects we also faced this issue. The solution is not to change units to vh because it will cause missing buttons on iphones die to bottom safari toolbar that is not taken into account when vh is used. Instead, please go through all the parents and remove all will-change props from them. I hope this will help as symptoms are pretty much the same as in our case.
I also believe we will fix this either in upcoming release or maybe you want to check the latest because it already could be released

@groomershop-mt
Copy link
Contributor

Thank you for sugestion. We will try today apply this commit and confirm if this solve the issue:

1929148

@frqnck
Copy link

frqnck commented Aug 23, 2021

Above worked for us.

@groomershop-mt
Copy link
Contributor

For us this also worked, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@frqnck @marcoveeneman @mborkowski @groomershop-mt