Skip to content

/ servo

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

Jump to bottom

The husky dog cannot be styled correctly #24169

Open
CYBAI opened this issue Sep 10, 2019 · 1 comment
Open

The husky dog cannot be styled correctly #24169

CYBAI opened this issue Sep 10, 2019 · 1 comment
Labels
C-needs minimized testcase

Comments

@CYBAI
Copy link
Collaborator

@CYBAI CYBAI commented Sep 10, 2019

Due to not able to access the codepen, I tried to copy all the scripts to a local file.

In Servo, we don't have a complete husky 🙀

Run this locally 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

<style>
  @keyframes tail {
    6.6666666667% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    10% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    13.3333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    20% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    26.6666666667% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    46.6666666667% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    48.3333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    50% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    50.8333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    51.6666666667% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    52.5% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    53.3333333333% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    54.1666666667% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    55% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    55.8333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    56.6666666667% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    57.5% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    58.3333333333% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    59.1666666667% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    60% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    60.8333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    61.6666666667% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    62.5% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    63.3333333333% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    64.1666666667% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    65% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    65.8333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    66.6666666667% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    67.5% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    68.3333333333% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    69.1666666667% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    70% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    70.8333333333% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    71.6666666667% {
      -webkit-transform: rotate(28deg);
      transform: rotate(28deg);
    }
    72.5% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }
  @keyframes left-ear {
    0% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }
    6.6666666667% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }
    13.3333333333% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    26.6666666667% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    33.3333333333% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    40% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    46.6666666667% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    53.3333333333% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    60% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    80% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    93.3333333333% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }
    100% {
      -webkit-transform: rotateZ(6deg);
      transform: rotateZ(6deg);
    }
  }
  @keyframes right-ear {
    0% {
      -webkit-transform: rotateZ(-16deg) rotateY(180deg);
      transform: rotateZ(-16deg) rotateY(180deg);
    }
    6.6666666667% {
      -webkit-transform: rotateZ(-16deg) rotateY(180deg);
      transform: rotateZ(-16deg) rotateY(180deg);
    }
    13.3333333333% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    26.6666666667% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    33.3333333333% {
      -webkit-transform: rotateZ(-30deg) rotateY(180deg);
      transform: rotateZ(-30deg) rotateY(180deg);
    }
    36.6666666667% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    37.3333333333% {
      -webkit-transform: rotateZ(-30deg) rotateY(180deg);
      transform: rotateZ(-30deg) rotateY(180deg);
    }
    38% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    40% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    40.6666666667% {
      -webkit-transform: rotateZ(-30deg) rotateY(180deg);
      transform: rotateZ(-30deg) rotateY(180deg);
    }
    41.3333333333% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    46.6666666667% {
      -webkit-transform: rotateZ(-9deg) rotateY(180deg);
      transform: rotateZ(-9deg) rotateY(180deg);
    }
    53.3333333333% {
      -webkit-transform: rotateZ(-9deg) rotateY(180deg);
      transform: rotateZ(-9deg) rotateY(180deg);
    }
    60% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    60.6666666667% {
      -webkit-transform: rotateZ(-30deg) rotateY(180deg);
      transform: rotateZ(-30deg) rotateY(180deg);
    }
    61.3333333333% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    62.6666666667% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    63.3333333333% {
      -webkit-transform: rotateZ(-30deg) rotateY(180deg);
      transform: rotateZ(-30deg) rotateY(180deg);
    }
    64% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    80% {
      -webkit-transform: rotateZ(-19deg) rotateY(180deg);
      transform: rotateZ(-19deg) rotateY(180deg);
    }
    93.3333333333% {
      -webkit-transform: rotateZ(-16deg) rotateY(180deg);
      transform: rotateZ(-16deg) rotateY(180deg);
    }
    100% {
      -webkit-transform: rotateZ(-16deg) rotateY(180deg);
      transform: rotateZ(-16deg) rotateY(180deg);
    }
  }
  *,
  *:before,
  *:after {
    -webkit-animation-timing-function: cubic-bezier(
      0.645,
      0.045,
      0.355,
      1
    ) !important;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    transition: -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1),
      -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition-duration: 0s;
  }

  .husky {
    height: 60vmin;
    width: 84vmin;
    pointer-events: none;
  }
  @media screen and (max-width: 400px) {
    .husky {
      -webkit-animation: none;
      animation: none;
    }
  }
  .husky:before {
    width: 90%;
    height: 0.5vmin;
    background: #30508f;
    border-radius: 0.5vmin;
    top: 100%;
    left: 5%;
    z-index: 2;
  }
  .husky:after {
    width: 100%;
    height: 10%;
    top: calc(100% + 0.5vmin);
    z-index: 3;
  }

  div:before,
  div:after {
    content: "";
    display: block;
    position: absolute;
  }

  .head {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    position: absolute;
    height: 45%;
    width: 58%;
    left: 34%;
    top: 5%;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(calc(var(--mouse-x, 0) * 10deg - 5deg));
    transform: rotate(calc(var(--mouse-x, 0) * 10deg - 5deg));
  }
  .head:before {
    background: #30508f;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    border-bottom-right-radius: 10% 60%;
    height: 100%;
    width: 100%;
  }

  .face {
    position: absolute;
    width: 98%;
    height: 62%;
    top: 15%;
    left: 2%;
    -webkit-transform: translateX(calc(var(--mouse-x, 0) * 20% - 10%))
      translateY(calc(var(--mouse-y, 0) * 10% - 5%));
    transform: translateX(calc(var(--mouse-x, 0) * 20% - 10%))
      translateY(calc(var(--mouse-y, 0) * 10% - 5%));
  }
  .face:before {
    z-index: 1;
    width: 94%;
    height: 70%;
    left: 3%;
    background-color: white;
    bottom: 5%;
    border-top-left-radius: 40% 50%;
    border-top-right-radius: 40% 50%;
    border-bottom-left-radius: 30% 50%;
    border-bottom-right-radius: 30% 40%;
  }

  .eye {
    -webkit-animation: eyes 12s none infinite;
    animation: eyes 12s none infinite;
    position: absolute;
    width: 30%;
    height: 40%;
    background-color: white;
    right: 45%;
    border-top-left-radius: 55% 50%;
    border-top-right-radius: 45% 50%;
    z-index: 2;
    -webkit-transform: translateX(calc(var(--mouse-x, 0) * 20% - 10%));
    transform: translateX(calc(var(--mouse-x, 0) * 20% - 10%));
  }
  .eye:before {
    -webkit-transform: translateX(calc(var(--mouse-x, 0) * 200% - 100%))
      translateY(calc(var(--mouse-y, 0) * 200% - 100%));
    transform: translateX(calc(var(--mouse-x, 0) * 200% - 100%))
      translateY(calc(var(--mouse-y, 0) * 200% - 100%));
    -webkit-animation: left-eye 12s none infinite;
    animation: left-eye 12s none infinite;
    height: 15%;
    width: 15%;
    border-radius: 100%;
    background: #343c60;
    top: 45%;
    left: 45%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  .eye + .eye {
    z-index: 1;
    right: initial;
    left: 48%;
    border-top-right-radius: 55% 50%;
    border-top-left-radius: 45% 50%;
  }

  .nose {
    z-index: 2;
    position: absolute;
    width: 20%;
    height: 20%;
    top: 29%;
    left: 42%;
  }
  .nose:after {
    background: #30508f;
    height: 100%;
    width: 100%;
    border-top-left-radius: 20% 20%;
    border-top-right-radius: 30% 20%;
    border-bottom-right-radius: 55% 80%;
    border-bottom-left-radius: 50% 80%;
    -webkit-transform: translateX(calc(var(--mouse-x, 0) * 150% - 75%));
    transform: translateX(calc(var(--mouse-x, 0) * 150% - 75%));
  }
  .nose:before {
    height: 100%;
    width: 200%;
    background: white;
    top: 50%;
    left: -50%;
    z-index: -1;
    border-radius: 50%;
  }

  .ear {
    -webkit-animation: left-ear 12s both infinite;
    animation: left-ear 12s both infinite;
    position: absolute;
    top: 3%;
    left: -10%;
    width: 48%;
    height: 30%;
    border-bottom-left-radius: 100% 90%;
    border-top-left-radius: 10%;
    -webkit-transform-origin: 80% center;
    transform-origin: 80% center;
    overflow: hidden;
    background: #30508f;
  }
  .ear:before {
    width: 70%;
    height: 55%;
    border: 2px solid #30508f;
    background: #de6465;
    top: 20%;
    left: 15%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewX(30deg) rotate(-5deg);
    transform: skewX(30deg) rotate(-5deg);
  }
  .ear:after {
    width: 70%;
    height: 100%;
    border-top-left-radius: 100%;
    background: #30508f;
    left: 32%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  .ear + .ear {
    -webkit-animation: right-ear 12s both infinite;
    animation: right-ear 12s both infinite;
    background-color: #343c60;
    left: 15%;
    top: 5%;
    z-index: -1;
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  .ear + .ear:before {
    border-color: #343c60;
  }
  .ear + .ear:after {
    background: #343c60;
  }

  .mouth {
    z-index: 1;
    position: absolute;
    width: 48%;
    height: 55%;
    bottom: -5%;
    left: 28%;
    overflow: hidden;
    -webkit-transform: translateX(calc(var(--mouse-x, 0) * 50% - 25%));
    transform: translateX(calc(var(--mouse-x, 0) * 50% - 25%));
  }
  .mouth:before,
  .mouth:after {
    -webkit-animation: mouth-cover-left 12s none infinite;
    animation: mouth-cover-left 12s none infinite;
    width: 28%;
    height: 100%;
    background: white;
    top: -50%;
    left: 0;
    z-index: 3;
    -webkit-transform-origin: right top;
    transform-origin: right top;
  }
  .mouth:after {
    -webkit-animation: mouth-cover-right 12s none infinite;
    animation: mouth-cover-right 12s none infinite;
    left: initial;
    right: 0;
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .lips {
    z-index: 2;
    height: 35%;
    width: 100%;
  }
  .lips:before,
  .lips:after {
    background: white;
    width: calc(50% + 1.5px);
    border-color: #9eb6d7;
    border-width: 3px;
    border-style: solid;
    height: 100%;
    border-bottom-left-radius: 65% 100%;
    border-bottom-right-radius: 35% 50%;
    border-top-right-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
  }
  .lips:after {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    left: initial;
    right: 0;
  }

  .tongue {
    -webkit-animation: tongue 12s none infinite;
    animation: tongue 12s none infinite;
    position: absolute;
    height: 100%;
    width: 44%;
    background: #de6465;
    left: 25%;
    bottom: 100%;
    z-index: 1;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
  }

  .body {
    -webkit-animation: body 12s none infinite;
    animation: body 12s none infinite;
    width: 45%;
    height: 100%;
    position: absolute;
    left: 25%;
  }

  .torso {
    position: absolute;
    height: 55%;
    width: 100%;
    bottom: 0;
  }
  .torso:before {
    background: #30508f;
    height: 100%;
    width: 50%;
    -webkit-transform: translateX(-20%) skewX(-30deg);
    transform: translateX(-20%) skewX(-30deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    border-radius: 0 30% 0 60%;
  }
  .torso:after {
    background: #30508f;
    height: 100%;
    width: 60%;
    top: 0;
    right: 0;
    border-radius: 10% 40% 60% 0;
  }

  .mane {
    -webkit-animation: mane 12s none infinite;
    animation: mane 12s none infinite;
    z-index: 2;
    position: absolute;
    width: 31.5%;
    height: 30%;
    top: 44%;
    left: 37%;
  }
  .mane:before {
    background: white;
    height: 40%;
    width: 100%;
    border-top-left-radius: 10% 50%;
    border-top-right-radius: 20% 100%;
    border-bottom-left-radius: 10% 50%;
  }
  .mane:after {
    background: white;
    top: 25%;
    height: 76%;
    width: 30%;
    right: 23%;
    border-top-right-radius: 100% 80%;
    -webkit-transform: rotate(47deg);
    transform: rotate(47deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
  }

  .coat {
    position: absolute;
    width: 50%;
    height: 50%;
    background: white;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    left: 10%;
    top: 21%;
    -webkit-transform: rotate(25deg) skewX(-30deg);
    transform: rotate(25deg) skewX(-30deg);
  }

  .legs {
    background-color: #30508f;
    position: absolute;
    height: 30%;
    width: 42%;
    left: 23%;
    bottom: 0;
    border-top-left-radius: 20% 37%;
    border-bottom-left-radius: 10% 37%;
    border-top-right-radius: 50%;
    z-index: 1;
  }

  .front-legs {
    position: absolute;
    width: 55%;
    height: 117%;
    bottom: 0;
    right: -12%;
  }
  .front-legs:before {
    width: 4%;
    height: 6%;
    background: transparent;
    bottom: 0;
    left: 47%;
    box-shadow: -1.3vmin 0 0 #9eb6d7, -2.8vmin 0 0 #9eb6d7, 1.3vmin 0 0 #4f8edb,
      2.8vmin 0 0 #4f8edb;
    z-index: 2;
  }
  .front-legs > .leg {
    width: 51%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 50%;
    overflow: hidden;
  }
  .front-legs > .leg:before {
    background: #c8daf2;
    height: 100%;
    width: 100%;
    -webkit-transform: skewY(-30deg) skewX(10deg);
    transform: skewY(-30deg) skewX(10deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
  .front-legs > .leg + .leg {
    right: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .front-legs > .leg + .leg:before {
    background: #9eb6d7;
  }

  .hind-leg {
    position: absolute;
    background: #9eb6d7;
    width: 35%;
    height: 25%;
    border-top-left-radius: 35% 100%;
    border-top-right-radius: 40% 100%;
    bottom: 0%;
    right: 45%;
  }
  .hind-leg:before {
    width: 6%;
    height: 20%;
    background: transparent;
    bottom: 0;
    left: 70%;
    box-shadow: -0.8vmin 0 0 #4f8edb, 0.8vmin 0 0 #4f8edb;
  }

  .tail {
    position: absolute;
    width: 15%;
    height: 6%;
    bottom: 0;
    right: 72%;
    background: #343c60;
    z-index: 0;
  }
  .tail > .tail {
    -webkit-animation: tail 12s none infinite;
    animation: tail 12s none infinite;
    height: 100%;
    width: 4vmin;
    right: 26%;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    border-top-left-radius: 50% 50%;
    border-bottom-left-radius: 50% 50%;
    -webkit-transform: rotate(26deg);
    transform: rotate(26deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .husky > .tail {
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
  }
  .husky > .tail > .tail {
    right: 88%;
  }

  @-webkit-keyframes squiggly-anim {
    0% {
      -webkit-filter: url("#squiggly-0");
      filter: url("#squiggly-0");
    }
    25% {
      -webkit-filter: url("#squiggly-1");
      filter: url("#squiggly-1");
    }
    50% {
      -webkit-filter: url("#squiggly-2");
      filter: url("#squiggly-2");
    }
    75% {
      -webkit-filter: url("#squiggly-3");
      filter: url("#squiggly-3");
    }
    100% {
      -webkit-filter: url("#squiggly-4");
      filter: url("#squiggly-4");
    }
  }

  @keyframes squiggly-anim {
    0% {
      -webkit-filter: url("#squiggly-0");
      filter: url("#squiggly-0");
    }
    25% {
      -webkit-filter: url("#squiggly-1");
      filter: url("#squiggly-1");
    }
    50% {
      -webkit-filter: url("#squiggly-2");
      filter: url("#squiggly-2");
    }
    75% {
      -webkit-filter: url("#squiggly-3");
      filter: url("#squiggly-3");
    }
    100% {
      -webkit-filter: url("#squiggly-4");
      filter: url("#squiggly-4");
    }
  }
  html,
  body {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #4f8edb;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    position: relative;
  }
</style>

<div class="husky">
  <div class="mane">
    <div class="coat"></div>
  </div>
  <div class="body">
    <div class="head">
      <div class="ear"></div>
      <div class="ear"></div>
      <div class="face">
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="nose"></div>
        <div class="mouth">
          <div class="lips"></div>
          <div class="tongue"></div>
        </div>
      </div>
    </div>
    <div class="torso"></div>
  </div>
  <div class="legs">
    <div class="front-legs">
      <div class="leg"></div>
      <div class="leg"></div>
    </div>
    <div class="hind-leg"></div>
  </div>
  <div class="tail">
    <div class="tail">
      <div class="tail">
        <div class="tail">
          <div class="tail">
            <div class="tail">
              <div class="tail"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const { body } = document;
  const fullWidth = body.clientWidth;
  const fullHeight = body.clientHeight;

  const { fromEvent } = rxjs;
  const { map } = rxjs.operators;

  const mouseMove$ = fromEvent(body, "mousemove");

  const mouseXY$ = mouseMove$.pipe(
    map(({ offsetX, offsetY }) => ({
      x: offsetX / fullWidth,
      y: offsetY / fullHeight
    }))
  );

  mouseXY$.subscribe(({ x, y }) => {
    body.style.setProperty("--mouse-x", x);
    body.style.setProperty("--mouse-y", y);
  });
</script>
Firefox Servo
image image

cc @emilio

Built with 6ed204d on macOS 10.14.6
@nicoabie
Copy link

@nicoabie nicoabie commented Jul 26, 2020

Screen Shot 2020-07-26 at 15 21 25

It is running far better now on macOS 10.15.6 built with b83433f
The only issue seems to be the nose
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C-needs minimized testcase
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@nicoabie @CYBAI
You can’t perform that action at this time.