iframe: false still injects inline css code

[JHuppi]

I have set iframe: false on my cart component:

var ui = ShopifyBuy.UI.init(client);

ui.createComponent('cart', {
  node: document.getElementById('checkout'),
  options: {
    cart: {
      iframe: false,
      startOpen: true
    }
  }
});

Even though the color and font styles have reset their is still a chunk of inline css injected into the head tag:

.shopify-buy-modal-is-active {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.shopify-buy-frame {
  display: inline-block
}

.shopify-buy-frame iframe {
  width: 100%;
  display: block;
  height: 0;
  overflow: hidden;
}

.shopify-buy-frame--cart {
  width: 100%;
  max-width: 350px;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 2147483647;
  transform: translateX(100%);
  -webkit-transform: translateX(100%)
}

.shopify-buy-frame--cart iframe {
  height: 100%;
}

.shopify-buy-frame--cart.is-initialized {
  transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shopify-buy-frame--cart.is-active {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

.shopify-buy-frame--product {
  display: block
}

.shopify-buy-frame--product.shopify-buy__layout-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.shopify-buy-frame--product.shopify-buy__layout-horizontal iframe {
  max-width: 100%;
}

@media (min-width: 950px) {

  .shopify-buy-frame--product.shopify-buy__layout-horizontal iframe {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }
}

.shopify-buy-frame--toggle {
  display: inline-block
}

.shopify-buy-frame--toggle:not(.is-sticky) {
  overflow: hidden;
  padding: 5px;
}

.shopify-buy-frame--toggle.is-sticky {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  z-index: 2147483645;
}

.shopify-buy-frame--toggle.is-active.is-sticky {
  display: block;
}

.is-active {
}

.is-active .shopify-buy-frame--toggle {
}

.is-active .shopify-buy-frame--toggle iframe {
  min-height: 67px;
}

.shopify-buy-frame--productSet {
  width: 100%;
}

.shopify-buy-frame--modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2147483646;
  display: none;
  transition: background 300ms ease
}

.shopify-buy-frame--modal iframe {
  height: 100%;
  width: 100%;
  max-width: none;
}

.shopify-buy-frame--modal.is-active {
  background: rgba(0, 0, 0, .6);
}

.shopify-buy-frame--modal.is-block {
  display: block;
}

According to the docs: If you wish to have full control over the appearance of your embed and know how to use CSS, you may choose to change this value to false.

Injection of inline css doesn't seem like "full control over the appearance". Is this a bug or the intention of the code?

I know I can override this css code, but I'd rather it not be injected in the first place.

[Danultimate]

Wondering the same and for some reason I cant even override @JHuppi , did you find any solution?

[JHuppi]

I haven't found a solution yet, just doing my best to make the default styles integrate with the rest of my design.

[sud33p]

Totally agree with this. This is really interfering with our styles and not easy to override. Currently we are doing something like this to override some of the styles that we don't want:

.shopify-buy-frame.shopify-buy-frame--product {
    display: flex;
}

[eatinsnacks]

Still seeing this issue a year and a half later.

[kiahreading]

I am having the same issue, did anyone find a work around for this?

[SplitterAlex]

Issue still not resolved with latest version.

[afbora]

+1