1password button/icon misaligned from text field

crrpf · October 2023

Hello! A problem with a workaround here, for any other lost wanderers facing a similar issue.

The problem

I'm developing a new interface for account management and we noticed that the 1password button/icon for autocomplete is way misaligned on Chrome on Mac:

Expectation

The 1password icon should be aligned with the text field.

Observations

the distance between the 1password button/icon and the text input field increases if I scroll down the page
- e.g. if I zoom way out so the whole page is in view, the 1password button is aligned
- but if I zoom normally, scroll down and then focus on the input, the icon appears higher up on the page and further away from the input.
It appears to have something to do with container-type: inline-size; which is used on the <body> tag.

The code for the input itself is simple enough:

<input class="input input-text" data-action="input->profile#onInputChange" data-profile-target="input" name="name" type="text" value="John Doe">

The code for the rest of the site of relevance:
<body class="profile-personal-details">

.profile-personal-details {
  ...
  container-type: inline-size;
  ...
}

The workaround

For us, the fix is simply to move the container-type: inline-size; property off of the <body> tag and into an element immediately below it.

Bug

I do feel this does still represent a small bug in the browser extension too as it should be able to handle this use of container queries.

According to the formal definition, container-type applies to all elements.

Couple of other links on container type:

1Password Version: 1Password for Mac 8.10.18 (81018040)
Extension Version: 2.16.0
OS Version: Mac os 14.0
Browser: Chrome 118.0.5993.96