search

magesuite / theme-creativeshop

Open Software License 3.0
38 stars 23 forks source link

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

Open marcoveeneman opened 3 years ago

marcoveeneman commented 3 years ago

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:

My system is running the following:

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:

marcoveeneman commented 3 years ago

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

image
mborkowski commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

https://github.com/magesuite/theme-creativeshop/commit/1929148bb5f114c05abfa9f4a5f2356365c7530e

frqnck commented 3 years ago

Above worked for us.

groomershop-mt commented 3 years ago

For us this also worked, thank you.