CSS Translate3D或（Translatex）在Safari和Gnome Web上开始缓慢

发布于 2025-01-25 06:49:03 字数 2424 浏览 0 评论 0原文

Safari和Web Gnome上的股票动画开始缓慢启动，当我移动鼠标或单击股票HTML元素时，恢复了正常的速度。

我正在使用尾风。我还使用了纯CSS，它给了我同样的行为。

这是代码片段：（如果您有可用的话，请在iPhone或Safari上进行测试）

let tickerPosts = [{
  id: "1",
  title: "test test test test test test"
}, {
  id: "2",
  title: "test test test test test test test"
}]
const Thingy = props => ( < div className = "relative overflow-hidden bg-qallam-darkBgSecondary  dark:bg-qallam-darkBgSecondary text-lg" >
  <
  div className = "scroll-ticker min-w-fit relative -left-full hover:pause h-11 font-qallam pl-[480px] sm:pl-[668px] md:pl-[892px] lg:pl[1100px] xl:pl-[1600px] whitespace-nowrap" > {
    Array.isArray(tickerPosts) &&
    tickerPosts.map(({
      id,
      title
    }) => ( <
      span key = {
        id
      }
      className = "inline-block whitespace-nowrap px-10 my-2 border-l border-gray-400" >

      <
      a className = "cursor-pointer text-qallam-white hover:text-gray-300 hover:underline " > {
        title
      } <
      /a>  < /
      span >
    ))
  } <
  /div> < /
  div >

);

// Render it
ReactDOM.render( < Thingy / > ,
  document.getElementById("react")
);

@keyframes move-ticker {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100%, 0);
  }
}

.scroll-ticker {
  animation: move-ticker 15s linear 0s infinite;
}

<html dir="rtl">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div id="react" class="bg-purple-400"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>

</html>

原文

The ticker animation on safari and web gnome starts slowly and goes back to normal speed when I move the mouse or click on the ticker HTML element.

I'm using tailwind. I have also used pure CSS, and it gives me the same behavior.

Here is the code snippet: (test it on an iPhone or Safari if you have one available with you)

let tickerPosts = [{
  id: "1",
  title: "test test test test test test"
}, {
  id: "2",
  title: "test test test test test test test"
}]
const Thingy = props => ( < div className = "relative overflow-hidden bg-qallam-darkBgSecondary  dark:bg-qallam-darkBgSecondary text-lg" >
  <
  div className = "scroll-ticker min-w-fit relative -left-full hover:pause h-11 font-qallam pl-[480px] sm:pl-[668px] md:pl-[892px] lg:pl[1100px] xl:pl-[1600px] whitespace-nowrap" > {
    Array.isArray(tickerPosts) &&
    tickerPosts.map(({
      id,
      title
    }) => ( <
      span key = {
        id
      }
      className = "inline-block whitespace-nowrap px-10 my-2 border-l border-gray-400" >

      <
      a className = "cursor-pointer text-qallam-white hover:text-gray-300 hover:underline " > {
        title
      } <
      /a>  < /
      span >
    ))
  } <
  /div> < /
  div >

);

// Render it
ReactDOM.render( < Thingy / > ,
  document.getElementById("react")
);

@keyframes move-ticker {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100%, 0);
  }
}

.scroll-ticker {
  animation: move-ticker 15s linear 0s infinite;
}

<html dir="rtl">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div id="react" class="bg-purple-400"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>

</html>

分享到QQ

分享到微博