Closed
Bug 1375977
Opened 7 years ago
Closed 7 years ago
stylo: site issue: (inline svg) gutefrage.net
Categories
(Core :: CSS Parsing and Computation, defect, P1)
Tracking
()
VERIFIED
DUPLICATE
of bug 1376092
People
(Reporter: jan, Assigned: chenpighead)
References
(Blocks 1 open bug, )
Details
(Keywords: nightly-community)
Attachments
(1 file)
|
(deleted),
image/png
|
Details |
2017-06-23_gutefrage.net
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170623115718
Steps to reproduce:
The up- and downvote inline SVGs are broken.
https://www.gutefrage.net/frage/kennt-jemand-gute-lern-methoden-damit-man-sich-viel-einpraegt-usw
See screenshot.
Left: stylo enabled, webrender/webrendest disabled
Right: stylo disabled, webrender/webrendest enabled
|
Reporter | |
Updated•7 years ago
|
Blocks: stylo-site-issues
Has STR: --- → yes
Keywords: nightly-community
OS: Unspecified → Linux
Hardware: Unspecified → x86_64
|
Assignee | |
Comment 1•7 years ago
|
||
Hmmm... interesting, the icon is made by svg use element, which I thought we should've supported in Bug 265894.
|
||
Comment 2•7 years ago
|
||
Ok, over to Jeremy for investigation.
Assignee: nobody → jeremychen
Priority: -- → P1
|
|
Assignee | |
Comment 3•7 years ago
|
||
Looks like the style settings for the <button> element is not applied properly, the color and background-color are both wrong. However, in my simplified version (see below), it renders correctly... I still believe there's something wrong so that the inherit/currentColor setting in svg use element is resolved to default color.
```
<html>
<head>
<style type="text/css">
.Voting-button {
color:#a8acad;
cursor:pointer;
fill:#f6f7f7;
stroke:#eeeeef
}
button {
background:transparent;
border:0;
padding:0
}
</style>
</head>
<div>
<button class="Voting-button">
<svg>
<use xlink:href="icons.svg#shape-icon-upvote"/> <!-- this is our visible icon --></use>
</svg>
</button>
</div>
</html>
```
where icons.svg is
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="-1 -1 34 34" id="shape-icon-upvote">
<title>Upvote Icon</title>
<g stroke-width="1" fill-rule="evenodd">
<circle id="path-1" cx="16" cy="16" r="16" fill="inherit" stroke="inherit" stroke-width="2"/>
<polygon fill="currentColor" points="15.8278639 8.93000031 9.5 15.2601017 11.0842035 16.8420677 14.7090761 13.2127201 14.7090761 23.6331097 16.9466517 23.6331097 16.9466517 13.2104825 20.5737618 16.8420677 22.1579653 15.2578642 17.4098298 10.5119663"/>
</g>
</symbol>
</svg>
```
|
|
||
Comment 4•7 years ago
|
||
CC xidorn, who did currentColor.
|
|
Assignee | |
Comment 5•7 years ago
|
||
Second thought, this might be something related to external stylesheet loading issue, since the inline stylesheet can't reproduce this issue. I'll download the raw web page and try to get a simplified test case by bisecting the file.
|
|
Reporter | |
Comment 6•7 years ago
|
||
(In reply to Jeremy Chen [:jeremychen] UTC+8 (away 7/3-7/11) from comment #5)
> Second thought, this might be something related to external stylesheet loading issue, since the inline stylesheet can't reproduce this issue. I'll download the raw web page and try to get a simplified test case by bisecting the file.
Please forgive me!
<link rel="null" href="/nmms/css/style-0b90017c5c.min.css" as="style" onload="this.rel='stylesheet'">
Editing rel="null" to rel="stylesheet" fixes this.
(And there is another one: <link rel="null" href="/nmms/css/fonts-e475b33f.min.css" as="style" onload="this.rel='stylesheet'"> )
See bug 1376092 comment 9
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
|
|
Assignee | |
Comment 7•7 years ago
|
||
(In reply to Darkspirit from comment #6)
> (In reply to Jeremy Chen [:jeremychen] UTC+8 (away 7/3-7/11) from comment #5)
> > Second thought, this might be something related to external stylesheet loading issue, since the inline stylesheet can't reproduce this issue. I'll download the raw web page and try to get a simplified test case by bisecting the file.
>
> Please forgive me!
>
> <link rel="null" href="/nmms/css/style-0b90017c5c.min.css" as="style"
> onload="this.rel='stylesheet'">
>
> Editing rel="null" to rel="stylesheet" fixes this.
>
> (And there is another one: <link rel="null"
> href="/nmms/css/fonts-e475b33f.min.css" as="style"
> onload="this.rel='stylesheet'"> )
>
> See bug 1376092 comment 9
Nice catch!! Just about to upload a simplified test case. Thank you!
FWIW, there's the secret script (list below) that adds the media attribute to the link element.
```
<script type="text/javascript">!function(e){"use strict";var t=function(t,n,r){function o(e){if(i.body)return e();setTimeout(function(){o(e)})}function a(){d.addEventListener&&d.removeEventListener("load",a),d.media=r||"all"}var l,i=e.document,d=i.createElement("link");if(n)l=n;else{var s=(i.body||i.getElementsByTagName("head")[0]).childNodes;l=s[s.length-1]}var u=i.styleSheets;d.rel="stylesheet",d.href=t,d.media="only x",o(function(){l.parentNode.insertBefore(d,n?l:l.nextSibling)});var f=function(e){for(var t=d.href,n=u.length;n--;)if(u[n].href===t)return e();setTimeout(function(){f(e)})};return d.addEventListener&&d.addEventListener("load",a),d.onloadcssdefined=f,f(a),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(e){if(e.loadCSS){var t=loadCSS.relpreload={};if(t.support=function(){try{return e.document.createElement("link").relList.supports("preload")}catch(e){return!1}},t.poly=function(){for(var t=e.document.getElementsByTagName("link"),n=0;n<t.length;n++){var r=t[n];"preload"===r.rel&&"style"===r.getAttribute("as")&&(e.loadCSS(r.href,r,r.getAttribute("media")),r.rel=null)}},!t.support()){t.poly();var n=e.setInterval(t.poly,300);e.addEventListener&&e.addEventListener("load",function(){t.poly(),e.clearInterval(n)}),e.attachEvent&&e.attachEvent("onload",function(){e.clearInterval(n)})}}}(this);</script>
```
|
|
Reporter | |
Comment 8•7 years ago
|
||
Nightly 56 x64 20170703100343 @ Debian Testing (Linux 4.9.0-3-amd64, Radeon RX480)
about:support > Stylo: true (enabled by user)
Verified fixed: https://www.gutefrage.net/frage/kennt-jemand-gute-lern-methoden-damit-man-sich-viel-einpraegt-usw
Status: RESOLVED → VERIFIED
You need to log in
before you can comment on or make changes to this bug.
Description
•