Working on It Name keeps... disappearing???

Discussion in 'Bug Reports' started by DigitalAtlas, Apr 4, 2017.

  1. DigitalAtlas Don't wake me from the dream.

    Joined:
    Oct 1, 2006
    Location:
    Blossom City
    2,335
    [​IMG]

    Yeah what?

    EDIT: WAIT ASHWIN WAS HERE????
     
  2. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
    I think you're seeing things. ;)
     
  3. DigitalAtlas Don't wake me from the dream.

    Joined:
    Oct 1, 2006
    Location:
    Blossom City
    2,335
    [​IMG]

    No I'm not Ams...
     
  4. libregkd -

    Joined:
    Sep 30, 2006
    2,902
    This seems to be an issue that only affects Chrome and possibly Safari (I only tested Chrome, Edge, and Firefox personally). When the username wraps around to the next line, part of it becomes transparent (the text is actually still there). I'll look into the issue as to why the browser doesn't play nice w/ the CSS.
     
  5. DigitalAtlas Don't wake me from the dream.

    Joined:
    Oct 1, 2006
    Location:
    Blossom City
    2,335
    Appreciate it.
     
  6. DigitalAtlas Don't wake me from the dream.

    Joined:
    Oct 1, 2006
    Location:
    Blossom City
    2,335
    WELP

    It's not isolated to the front screen

    [​IMG]

    Happens on mobile Safari too

    [​IMG]
     
  7. libregkd -

    Joined:
    Sep 30, 2006
    2,902
    The issue seems to be Chrome (and other browsers like Safari) isn't playing very nice with the background-clip CSS property.

    Since this information is publicly available (insofar as you can just inspect the web page and you can find this); this is the CSS that is used to achieve the rainbow username effect.

    Code:
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.20, #ff2), color-stop(0.3, #2f2), color-stop(0.45, #2ff), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(1, #f2f) );
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.20, #ff2), color-stop(0.3, #2f2), color-stop(0.45, #2ff), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(1, #f2f) );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    Disabling background clip will get you this on all browsers:

    upload_2017-4-29_21-43-42.png

    Obviously having it enabled will get you this:
    upload_2017-4-29_21-44-18.png

    Or this (where the implementation seems wonky):
    upload_2017-4-29_21-44-43.png

    So the actual colorization is appearing on Chrome (and Safari I would assume) across a line break just as it is on Firefox. It just seems it's not clipping any text that happens after the line break. I'm still looking into it and I apologize for any inconvenience this may cause.
     
  8. DigitalAtlas Don't wake me from the dream.

    Joined:
    Oct 1, 2006
    Location:
    Blossom City
    2,335
    It's not causing any inconvenience man. It's providing a couple yucks while we await an inevitable fix. Thank you for putting in the effort but take your time.