I’ve been auditing the web journey for One Login. During mobile testing the single 'sign out' link we are using on IPV Core pages with the service header caused a horizontal scrollbar at higher magnifications on some devices.
Android does not have the issue
There are two ways to magnify the page with Android. The first is more discoverable. In Chrome, go to settings -> accessibility -> text scaling and increase the scaling from 100%. The second is to attach a keyboard and use control + plus or minus key to enlarge the entire page.
Screenshot for text scaling
The header content does not increase in size with the rest of the content
Screenshot for keyboard enlargement
The entire page is zoomed and no longer fits in the viewport. This behaviour is not specific to One Login – all websites have this issue, so I would say it’s out of scope to fix this.
iOS has the issue
Again, there are two ways to magnify the page in iOS. One is to go to the settings app -> Safari -> Page zoom -> change from 100% to another number. The other is to attach an external keyboard and use command + plus or minus to increase or decrease the text size.
Screenshot with page zoom set to 200%
There is a small horizontal scroll bar at this magification at the right hand side of the screen
Screenshot with external keyboard and control + plus pressed 6 times
Initial state on page load
Horizontally scrolling the page
The sign out link now requires quite a large horizontal scroll to see the sign out link, and the foreground/background colour contrast is low.
Possible solution
A possible fix would be to add
.one-login-header__container { flex-wrap:wrap; }
so that the 'sign out' link drops underneath the GOV.UK logo rather than staying on the same axis.
I’ve been auditing the web journey for One Login. During mobile testing the single 'sign out' link we are using on IPV Core pages with the service header caused a horizontal scrollbar at higher magnifications on some devices.
Android does not have the issue
There are two ways to magnify the page with Android. The first is more discoverable. In Chrome, go to settings -> accessibility -> text scaling and increase the scaling from 100%. The second is to attach a keyboard and use control + plus or minus key to enlarge the entire page.
Screenshot for text scaling
The header content does not increase in size with the rest of the content
Screenshot for keyboard enlargement
The entire page is zoomed and no longer fits in the viewport. This behaviour is not specific to One Login – all websites have this issue, so I would say it’s out of scope to fix this.
iOS has the issue
Again, there are two ways to magnify the page in iOS. One is to go to the settings app -> Safari -> Page zoom -> change from 100% to another number. The other is to attach an external keyboard and use command + plus or minus to increase or decrease the text size.
Screenshot with page zoom set to 200%
There is a small horizontal scroll bar at this magification at the right hand side of the screen
Screenshot with external keyboard and control + plus pressed 6 times
Initial state on page load
Horizontally scrolling the page
The sign out link now requires quite a large horizontal scroll to see the sign out link, and the foreground/background colour contrast is low.
Possible solution
A possible fix would be to add
so that the 'sign out' link drops underneath the GOV.UK logo rather than staying on the same axis.