Bug 162866 - Broken tab button behavior with svg <use> element
Summary: Broken tab button behavior with svg <use> element
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 10
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2016-10-03 09:47 PDT by Arseny Forshtreter
Modified: 2022-08-20 15:01 PDT (History)
11 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Arseny Forshtreter 2016-10-03 09:47:20 PDT
Hi everyone.

After upgrading Safari to version 10.0 one of my colleagues has noticed a very strange behavior on our service: pressing a Tab button while being focused on some of <input> elements on the page leads to focus on Safari interface elements (back button or first tab, depends whether tabs pane is visible or not) instead of a next input element.
Brief research has shown that <use> element causes the problem.
Here is a minimal example: https://jsfiddle.net/bwb9aq3h/ To reproduce a bug you need to focus a first <input>, press Tab and make sure that back button or tabs pane gets focused after that instead of next <input>

Even though we've found a workaround (a very odd one i must say, you need to insert a whitespace around <use> like here: https://jsfiddle.net/hsrdm2vv/), we sincerely hope for this to be fixed, because it breaks user experience on a lot of websites that use svg icons.

Thank you!
Comment 1 Radar WebKit Bug Importer 2016-10-03 18:41:21 PDT
Comment 2 Stephanie (Sullivan) Rewis 2016-11-03 14:26:45 PDT
Yes, agreed. This is a very big deal. While adding space might work for some, many large sites remove whitespace automatically. This is a high priority a11y and keyboard navigation bug in my opinion.
Comment 3 Ahmad Saleem 2022-08-12 09:03:37 PDT
I am not able to reproduce this in Safari 15.6 on macOS 12.5 and it seems to be fixed in Safari Technical Preview 151 better.

*** Safari 15.6 ***

1) Click on first input
2) Press Tab
3) It goes to next input
4) Press Tab again - it goes *poof*

*** Safari Technical Preview 151 ***

1) Click on first input
2) Press Tab
3) It goes to next input
4) Press Tab again - it goes to address bar
5) Press Tab again - it goes to first input field again.

Appreciate if someone can comment and mark this bug accordingly. Original actual results from "Comment 0" was that pressing Tab was not leading to next input field on the page.

NOTE - I had JSFiddle open with "show" in the end to make it fully visible.
Comment 4 Alexey Proskuryakov 2022-08-20 15:01:17 PDT
Yes, this appears fixed.