Can you absolute position your DOM elements on window.top instead of inside the iframes?

arthurgouveia

1Password X is injecting DOM along with inline style to position the dropdown with Credit Card choices inside of the window in which the input is inserted on, and the problem with that is that it forces a repaint that depending on the implementation of the website, will trigger side effects.

At Shopify, and in many other payment service providers, we use iframes for our credit card inputs, and the result is that once a user clicks on the Credit Card input and starts typing, it will add the necessary DOM from the extension, forcing a repaint and our implementation will resize the iframe to fit it's contents.

I'd like to suggest that given you're always absolutely positioning the DOM, if you could maybe only add it to window.top, instead of inside any possible iframes injected on the page. This way there wouldn't be any disruptions on the sizing of those elements.

This can be reproduced on Chrome, with 1Password X and saved credit card info, on our Payment Step, on Checkout:
https://tota11y.myshopify.com/12309936/checkouts/0dafefba4b878ffccf2045c56371207a

Gif for reference:

(Fill some random info on the first 2 steps and you'll reach the payment information step, which will load the iframes.)

---

1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided
Referrer: forum-search:iframe

arthurgouveia

If it's not clear what the problem is: the container of the input becomes huge in terms of height, where it should remain with the same one we defined previously, to seamlessly continue to look like it's not another page, but a regular input inside that step.

Mitch

Hi @arthurgouveia,

Thanks for writing this up. We're aware of this issue and it frustrates us as well on pages with iframes. We're going to take another shot at fixing it. The reason we haven't yet is because... well, it's hard. :)

Positioning an element on someone else's page is tricky enough in the best of circumstances. Hoisting the menu to the top frame will require us to place it without any help from the DOM. We'll have to have to poll each parent frame to get its offset and add them together, and then figure out what to do if one of those frames is on a different origin. (Fall back to centering the menu in the top frame?) It gets messy and slow if we're not careful. Then there's the challenge of coordinating event handling between the frame that has focus and the frame that has the menu.

So it's going go be tough, but working well with Shopify is a huge priority, and we'll do our best to come up with something smart.

-Mitch

arthurgouveia

Highly appreciate the answer and the effort, Mitch.

Please don't hesitate to reach out to me personally on Twitter at @arthurgouveia or arthur@shopify.com if we can join efforts on anything.

beyer

On behalf of Mitch, you are welcome! We are working on it and hope to have good news soon!

dankyung

Hey @arthurgouveia,

Thanks again for initially reporting this issue and for the approach you suggested. We were able to build off of that and get the basic functionality working but ended up running into many challenges along the way. We're happy to finally let you know you can now expect the inline menu to be always visible on Shopify and other websites.

Please let us know if you notice any issues with the new behaviour and we'll be happy to look into them.

Dan

arthurgouveia

So sorry for the long time to reply here, but thank you so much for taking care of this. I'm sure it was a tricky one! Tried here and confirmed it does not seem to be an issue any longer!

Ben

Glad to hear the improvements here have been helpful. :) Thanks again for reaching out about this.

Ben