New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tabbycats.club - see bug description #3257

Closed
Rudloff opened this Issue Sep 21, 2016 · 8 comments

Comments

Projects
None yet
9 participants
@Rudloff

Rudloff commented Sep 21, 2016

URL: http://tabbycats.club/
Browser / Version: Firefox 50.0
Operating System: Ubuntu
Problem type: Something else - I'll add details below

Steps to Reproduce

  1. Navigate to: http://tabbycats.club/

Expected Behavior:
The kitty should be displayed.

Actual Behavior:
The kitty is not displayed.

Screenshot Description

From webcompat.com with ❤️

@tsl143

This comment has been minimized.

Show comment
Hide comment
@tsl143

tsl143 Sep 21, 2016

Member

The issue is reproducible Ubuntu/Firefox.
Works good on Ubuntu/Chrome

Member

tsl143 commented Sep 21, 2016

The issue is reproducible Ubuntu/Firefox.
Works good on Ubuntu/Chrome

@MDTsai

This comment has been minimized.

Show comment
Hide comment
@MDTsai

MDTsai Sep 22, 2016

Error is caused in http://tabbycats.club/scripts/kittens.js:19:1

ReferenceError: myGoodies is not defined

But I can't find myGoodies declared anywhere.

MDTsai commented Sep 22, 2016

Error is caused in http://tabbycats.club/scripts/kittens.js:19:1

ReferenceError: myGoodies is not defined

But I can't find myGoodies declared anywhere.

@miketaylr

This comment has been minimized.

Show comment
Hide comment
@miketaylr

miketaylr Sep 22, 2016

Member

Hm, Chrome also has that same error but the cat still renders.

screen shot 2016-09-22 at 9 53 06 am

Member

miketaylr commented Sep 22, 2016

Hm, Chrome also has that same error but the cat still renders.

screen shot 2016-09-22 at 9 53 06 am

@miketaylr

This comment has been minimized.

Show comment
Hide comment
@miketaylr

miketaylr Sep 22, 2016

Member

I suspect the issue is somehow related to SVG -- not sure why it's not rendering yet.

screen shot 2016-09-22 at 9 56 31 am

Member

miketaylr commented Sep 22, 2016

I suspect the issue is somehow related to SVG -- not sure why it's not rendering yet.

screen shot 2016-09-22 at 9 56 31 am

@miketaylr

This comment has been minimized.

Show comment
Hide comment
@miketaylr

miketaylr Sep 23, 2016

Member
<div class="abs fill body purrs">
  <svg viewBox="0 0 480 480"><use xlink:href="#body-1"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-2"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-3"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-4"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-5"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-6"></use></svg>
</div>

Those use elements refer to <symbol> elements, which get cloned as <svg> elements. That means the following CSS makes them display:none:

svg.show:not(#combo-kitten), .cat img.show {
    display: block;
}
svg:not(#combo-kitten), .cat img {
    display: none;
}

I don't 100% understand why the second rule wins over the first, but more or less certain that this is due to https://bugzilla.mozilla.org/show_bug.cgi?id=265894. http://stackoverflow.com/questions/27866893/svg-fill-not-being-applied-in-firefox/27872310#27872310 has another good explanation.

The svg > use > svg { all: inherit !important;} workaround from this comment fixes the issue. I'm gonna set this to needscontact to see if the site author could provide a fix for Firefox users, but we should fix this in Gecko (will link to this issue from the bug).

Member

miketaylr commented Sep 23, 2016

<div class="abs fill body purrs">
  <svg viewBox="0 0 480 480"><use xlink:href="#body-1"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-2"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-3"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-4"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-5"></use></svg>
  <svg viewBox="0 0 480 480"><use xlink:href="#body-6"></use></svg>
</div>

Those use elements refer to <symbol> elements, which get cloned as <svg> elements. That means the following CSS makes them display:none:

svg.show:not(#combo-kitten), .cat img.show {
    display: block;
}
svg:not(#combo-kitten), .cat img {
    display: none;
}

I don't 100% understand why the second rule wins over the first, but more or less certain that this is due to https://bugzilla.mozilla.org/show_bug.cgi?id=265894. http://stackoverflow.com/questions/27866893/svg-fill-not-being-applied-in-firefox/27872310#27872310 has another good explanation.

The svg > use > svg { all: inherit !important;} workaround from this comment fixes the issue. I'm gonna set this to needscontact to see if the site author could provide a fix for Firefox users, but we should fix this in Gecko (will link to this issue from the bug).

@dacharya64

This comment has been minimized.

Show comment
Hide comment

dacharya64 commented Oct 17, 2016

@lzacharkow

This comment has been minimized.

Show comment
Hide comment
@lzacharkow

lzacharkow Oct 30, 2016

Hi everyone! I'm the creator 👋 I've known about this bug but I didn't know how to solve it until I stumbled across this thread. You are the best! Thank you for finding a fix. I'm updating the site today!

lzacharkow commented Oct 30, 2016

Hi everyone! I'm the creator 👋 I've known about this bug but I didn't know how to solve it until I stumbled across this thread. You are the best! Thank you for finding a fix. I'm updating the site today!

@adamopenweb

This comment has been minimized.

Show comment
Hide comment
@adamopenweb

adamopenweb Nov 11, 2016

Contributor

Great thanks @lzacharkow! Let's close this as fixed. 👍

Contributor

adamopenweb commented Nov 11, 2016

Great thanks @lzacharkow! Let's close this as fixed. 👍

@karlcow karlcow added this to the fixed milestone Oct 30, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment