css issues in IE10-IE11

Browser: IE10, IE11
OS: Windows 7

Hi there,

While testing the plugin in IE10/IE11, I’ve noticed a couple issues with the css. Sadly, I can’t add my own styling to fix these issues since the plugin’s css is in a style block in an iframe. Please help me. You are my only hope…

Let me know if you’d like to see pictures of the issues.

Issue #1:
Cart icon is going out of frame in the Cart Toggle

.shopify-buy__cart-toggle{
padding: 8px 10px;
}
.shopify-buy__cart-toggle__count{
margin-bottom: 10px;
}

Potential Fix #1:
.shopify-buy__cart-toggle{
padding: 5px 10px;
}
.shopify-buy__cart-toggle__count{
margin-bottom: 0;
}

Issue #2:
Image in modal is going up and out of the modal frame

.shopify-buy__product__variant-img{
top: 50%;
transform: translateY(50%);
}

Potential Fix #2:

.shopify-buy__product__variant-img{
top: 0;
transform: translateY(0%);
}

Issue #3:
Between 510px and 815px the closing tag (x) is floating outside of the modal.

@media all and (max-width:800px){
.shopify-buy__btn–close{
position: fixed;
}
}

Potential Fix #3:
Remove that css all together since you apply it at max-width: 499px

Issue #4:
The shopify-buy__modal-scroll-contents class code for the modal is not working. In other browser it makes that section scroll if content exceed height allocated.

Potential fix #4:
Giving a height to the class fixes the problem.

.shopify-buy__modal-scroll-contents{
height: 300px;
}

Issue #5:
There are two arrows displayed in the option select on the modal.

Potential fix #5:
Remove the icon when on IE and relocate space icon was taking

.shopify-buy__option-select__select{
padding-right: 0px;
}

.shopify-buy__select-icon{
display: none;
}

• This topic was modified 8 years, 5 months ago by evagm.
• This topic was modified 8 years, 5 months ago by evagm.
• This topic was modified 8 years, 5 months ago by evagm.