Magento2: Safari & minicart

[slackerzz]

Preconditions

1. 2.0.x & 2.1.2 (both CE & EE)
2. blank theme
3. Safari (both mac and ios)

Steps to reproduce

1. click the minicart icon to open the dropdown

Expected result

1. desktop
   
2. mobile
   

Actual result

1. desktop
   
2. mobile
   

I've found a really strange behavior, when the minicart dropdown is shown any style modification to the page through the inspector will fix the misplaced elements.

[rkhoury82]

Also the same for 2.1.3

[xmav]

@slackerzz Thanks for reporting this issue.
This issue is already addressed in internal ticket MAGETWO-63089. I’ve added your report on this issue to that ticket.

[slackerzz]

@xmav since it's not possible for us to track your internal tickets, can you tell if there is a solution/workaround?

[xmav]

@slackerzz this issue will be closed in sync with internal ticket

[Quinten]

You can try to tweak the position css of .minicart-wrapper .ui-dialog. Try static or absolute

I have something like this somewhere in some theme css:

.minicart-wrapper .ui-dialog {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 100%;
    left: 100%;
}

Still gives a strange glitching flash in IE9 and sometimes in safari on mac, but then it's fine. Doesn't do this on ios though.

[git-reset--hard]

Setting static width for the mini cart icon wrapper fixed this issue for me:
.minicart-wrapper {
width: 22px;
}

[patruvlad]

My fix is something close to what @Quinten did except no positioning since the child has the style we need ( if you correctly use .lib-dropdown()

.minicart-wrapper .ui-dialog {
    width: 0;
}

Tested crossbrowser and works without flickering

[slackerzz]

It would be nice to know what happened to MAGETWO-63089

[Flamestyle]

@Patruvlad, Could you write where exactly these lines were written?

[patruvlad]

@Flamestyle sure thing, you need to write the following codes of line in Magento_Checkout/web/css/source/module/_extend.less if you have a custom theme with inheritance from the Magento_Blank. If you have a custom file something like _minicart_extend.less that is included in the _extend.less set it in the custom style file

.minicart-wrapper{  
        > .mage-dropdown-dialog {
            width: 0;
        }
}

[magento-engcom-team]

@slackerzz, thank you for your report.
We've created internal ticket(s) MAGETWO-63985 to track progress on the issue.

[olgalytvynenko]

Hi, everyone!
You can use this commit as patch to fix an issue)

[okorshenko]

The issue has been fixed in 2.1-develop branch and will be available with next patch release