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:
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