Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#5990 closed defect (fixed)

SVG Fragment identifiers are broken in the Chrome when used as background-image

Reported by: saroyanm Assignee: saroyanm
Priority: P2 Milestone:
Module: User-Interface Keywords: options-page
Cc: greiner, ire, trev, wspee Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

https://codereview.adblockplus.org/29611615/

Description

Environment

Chrome V62.0.3202.75
Ubuntu 14.04 LTS

How to reproduce

  1. Run test environment of adblockplusui
  2. Go to the desktop options page advanced tab
  3. Click on toggle button next to any filter list in FILTER LISTS section
  4. Observe
  5. Hover Gear icon and Trash icon
  6. Observe

Observed behaviour

Toggle button state is not updated and hover state is not updated as well

Expected behaviour

Toggle button is being updated same as hover states of icons that use fragment IDs from the SVG

Note

Seems like this issue Chrome version dependent.

Change History (13)

comment:1 Changed 2 years ago by saroyanm

  • Cc wspee added

Ideally we would like to fix this before releasing for Chrome.

comment:2 Changed 2 years ago by saroyanm

Interestingly this was fixed previously, make sense to check if this is a cross OS issue or only linux specific.

comment:3 Changed 2 years ago by saroyanm

  • Summary changed from Fragment identifiers are broken in the Chrome to SVG Fragment identifiers are broken in the Chrome when used as background-image

comment:5 Changed 2 years ago by saroyanm

I can see couple of option of fixing this issue:

  1. Create 2 SVG Sprites, one for default state of all our icons, another for hover state of all our icons.
  2. Use PNG sprites.
  3. Use 2 different SVG file for each icon, one for hover another for regular state.

I think 1-st option is the best one, so far.

Note: I've tried to trigger re-render of the icon caused by mouse events, but this is still works unreliable.

Last edited 2 years ago by saroyanm (previous) (diff)

comment:6 Changed 2 years ago by greiner

I'd be fine with either (1) or (3) because I doubt that it'd be worth switching to PNGs at this point just because of this issue.

comment:7 Changed 2 years ago by saroyanm

Another workaround solution as suggested here Chromium ticket, might be the one that requires the least effort and quick to fix, this sounds to me as most reasonable workaround among what I came up with above.

comment:8 Changed 2 years ago by saroyanm

  • Owner set to saroyanm

comment:9 Changed 2 years ago by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:10 Changed 2 years ago by abpbot

A commit referencing this issue has landed:
Issue 5990 - Fix broken SVG icons in Chrome

comment:11 Changed 2 years ago by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:12 Changed 2 years ago by Ross

Fixed. (Issue found via testing: #6110)

adblockplusui / 200:98dd77c2b086
Chrome 52 / 62 / Windows 7
Chrome 62 / Ubuntu 14.04

comment:13 Changed 2 years ago by Ross

  • Tester changed from Unknown to Ross
  • Verified working set
Note: See TracTickets for help on using tickets.