Bug with SVG and classes

RESOLVED DUPLICATE of bug 265894

Status

()

Firefox
Untriaged
RESOLVED DUPLICATE of bug 265894
2 years ago
2 years ago

People

(Reporter: Erwann Mest, Unassigned)

Tracking

43 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20150819030206

Steps to reproduce:

http://jsbin.com/piriqequvo/1/edit?html,output



Expected results:

It should display the SVG. It works on Chrome.
(Reporter)

Comment 1

2 years ago
Created attachment 8650475 [details]
macosx-2015-08-20-at-16.39.02.png
(Reporter)

Comment 2

2 years ago
As you can see in the attachment, my selectors work but it doesn't render well. Plus, if you tick the display:none off, it works.

Comment 3

2 years ago
The svg within the pmd-Thumbnail-action is display none per 

      .pmd-Thumbnail-action svg {
        display: none;
      }

So nothing should be rendered, which is what Firefox does. Why do you think it should be otherwise?
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

2 years ago
Did you see my attachment? Plus it's not the "action" which is display:none but its svg.
(Reporter)

Comment 5

2 years ago
Sorry I misread your comment but still. See my attachment. And it works on chrome.
(Reporter)

Comment 6

2 years ago
The weight of the selector I use to display: block is higher.
Comment hidden (obsolete)
Comment hidden (obsolete)

Comment 9

2 years ago
(In reply to Robert Longson from comment #3)
> The svg within the pmd-Thumbnail-action is display none per 
> 
>       .pmd-Thumbnail-action svg {
>         display: none;
>       }
> 
> So nothing should be rendered, which is what Firefox does. Why do you think
> it should be otherwise?

Because there's more specific selector over there. I figured out that it's inner SVG in anonymous content what's causing it. So inner SVG gets "display:none" due to the selector.
Fixing the selector to ".pmd-Thumbnail-action > svg" (adding ">") fixes it.
Robert, do you think it should work like that? http://ss.ssmaker.ru/d4ffc531.png
Flags: needinfo?(longsonr)

Comment 10

2 years ago
Here's example without [data-type] http://jsbin.com/tuximilala/1/edit?html,output
(Reporter)

Comment 11

2 years ago
In fact, it's probably that. In the inspector, you do not see that "use" uses another svg, so you think there's only one svg tag but nope.

Comment 12

2 years ago
Ahh, I see what's going on now. The data-type was a red-herring, sorry about that.

When we clone the <use> svg into the document it basically becomes another <svg> within that document and we then erroneously keep it as display: none as the other selector (the one in comment 1) matches it.

So it is a valid bug after all, although we do know about it.
Flags: needinfo?(longsonr)
Resolution: INVALID → DUPLICATE
Duplicate of bug: 265894
(Reporter)

Comment 13

2 years ago
Thank you very much. ;)
You need to log in before you can comment on or make changes to this bug.