Bug with SVG and classes

RESOLVED DUPLICATE of bug 265894

Status

()

RESOLVED DUPLICATE of bug 265894
4 years ago
4 years ago

People

(Reporter: m+bugzilla, Unassigned)

Tracking

43 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 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

4 years ago
(Reporter)

Comment 2

4 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.
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: 4 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

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

Comment 5

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

Comment 6

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

Comment 9

4 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

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

Comment 11

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

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