Opened on 11/03/2017 at 08:21:19 PM

Closed on 11/21/2017 at 11:53:28 AM

Last modified on 11/30/2017 at 11:12:33 AM

#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.

Attachments (0)

Change History (13)

comment:1 Changed on 11/03/2017 at 08:22:16 PM by saroyanm

  • Cc wspee added

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

comment:2 Changed on 11/14/2017 at 11:23:58 AM 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 on 11/14/2017 at 11:25:07 AM 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:4 Changed on 11/16/2017 at 04:58:17 PM by saroyanm

comment:5 Changed on 11/16/2017 at 06:01:21 PM 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 on 11/16/2017 at 06:01:56 PM by saroyanm

comment:6 Changed on 11/16/2017 at 06:41:33 PM 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 on 11/16/2017 at 08:24:05 PM 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 on 11/17/2017 at 04:22:49 PM by saroyanm

  • Owner set to saroyanm

comment:9 Changed on 11/17/2017 at 04:42:07 PM by saroyanm

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

comment:10 Changed on 11/21/2017 at 11:50:35 AM by abpbot

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

comment:11 Changed on 11/21/2017 at 11:53:28 AM by saroyanm

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

comment:12 Changed on 11/30/2017 at 11:12:20 AM by Ross

Fixed. (Issue found via testing: #6110)

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

comment:13 Changed on 11/30/2017 at 11:12:33 AM by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Add Comment

Modify Ticket

Change Properties
Action
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from saroyanm.
 
Note: See TracTickets for help on using tickets.