Css 为什么在狩猎旅行中会有旋转传送车？

嘿，我已经从这个库中实现了一个Carousel组件 它在Chrome上运行良好，但在Safari上，它仍然在转换，而在较低的zIndex上有一个类似的元素转换副本

下面是使用它的组件的副本：

import React, { useState, useEffect, useRef, } from 'react';
import thestreet from './images/TheStreet.png'
import cnbc from './images/CNBC.png'
import moodys from './images/Moodys.png'
import nasdaq from './images/Nasdaq.png'
import Bloom from './images/bloom.png'
import mw from './images/MW.png'
import Carousel from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import Log from './images/log.png'
import Trend from './images/trend.png'


const News = (props) => {

const [news, setNews]=useState([])
const [IWidth, setIWidth] = useState(window.innerWidth)
const [IHeight, setIHeight] = useState(window.innerHeight)

// const [val, setVal] = useState(null)



// setTimeout(setVal(val+1),5000)
useEffect(() => {

    console.log(IWidth)
    window.addEventListener('resize', handleResize)
      setNews([
          {
            name: "TheStreet",
            link: "https://www.thestreet.com/markets",
            img: thestreet,
            description: "Get stock market news, stock picks, and investing lessons from Wall Street Experts" 
          },
          {
            name: "CNBC",
            link: "https://www.cnbc.com/markets/",
            img: cnbc,
            description: "View up-to-date U.S. market and world market charts. Get the latest on world economy news and global markets in our Market Overview." 
          },
          {
            name: "Moody's",
            link: "https://www.moodys.com/",
            img: moodys,
            description: "Moody’s CreditView is our flagship solution for global capital markets that incorporates credit ratings, research and data from Moody’s Investors Service plus research, data and content from Moody’s Analytics."
          },
          {
            name: "Nasdaq",
            link: "https://www.nasdaq.com/market-activity",
            img: nasdaq,
            description: "Find the latest stock market trends and activity today. Compare key indexes, including Nasdaq Composite, Nasdaq-100, Dow Jones Industrial & more." 
          },
          {
            name: "MarketWatch",
            link: "https://www.marketwatch.com/",
            img: mw,
            description: "MarketWatch provides the latest stock market, financial and business news. Get stock market quotes, personal finance advice, company news and more." 
          },
          {
          name: "Bloomberg",
          link: "https://www.marketwatch.com/",
          img: Bloom,
          description: "Bloomberg Markets is a monthly magazine launched in 1992, that provides in-depth coverage of global financial markets for finance professionals."
        },
      ])
}, []);

const handleResize =() =>{
    setIWidth(window.innerWidth)
    setIHeight(window.innerHeight)
}

return (
    <div className="News"
     >

     <Carousel
      slidesPerPage={1}
      slidesPerScroll={1}
    //   value={val}
      animationSpeed={1500}
      autoPlay={news.length > 5 ? 5000 : null} //5000
      stopAutoPlayOnHover
      draggable={news.length > 5 ? true : false}
      offset={-IWidth*0.0176}
      infinite
      itemWidth={IWidth*0.175}
      clickToChange={news.length > 5 ? true : false}
      centered
      >
     
    {
        news.map((el)=>{
            return (
                <a className="newsChild" href={el.link} rel="noopener noreferrer" target="_blank">
                
                <img className="newsImg" src={el.img}/>
                <div class="after" style={{fontSize:IWidth*0.01}}><br/><br/>{el.description}</div>
 
                </a>    
            )
        })
    }
    

    </Carousel>
    
    </div>
)


}


export default News

---

感谢大家抽出时间

您可以尝试在支持webkit伪类的元素前面使用它。这可能会对safari有所帮助。

您可以尝试在支持webkit伪类的元素前面使用它。这可能对safari有所帮助。

您需要在CSS中添加

-webkit-

前缀。使用：

@-webkit关键帧新闻

以及

-webkit动画：新闻
您需要在CSS中添加
-webkit-
前缀。使用：
@-webkit关键帧新闻
以及
-webkit动画：新闻
您能发布一个代码沙盒示例吗？人们至少可以更容易地复制它。你能发布一个代码沙盒的例子吗？人们至少更容易复制这一点。
.News{
      position: relative;
      width:80%;
      height:30%;
      top:90%;
      left:10%;
      flex:1;
      /* display: block; */
      /* background:red; */
      float: left;
      overflow-x: auto;
      overflow-y: hidden
      /* overflow-x: scroll; */
      
  }

  .newsChild{
    position: relative;
    display: inline-block;
    float: left;
    height:100%;
    width:80%;
    /* margin-left: 2.5%;
    right: 1.25%; */
    border-radius: 10%;
    /* background:linear-gradient(#000428,#004e92); */
    /* background:linear-gradient(#00B4DB,#0083B0); */
    overflow:hidden
  }


  .newsImg {
    position: relative;
    height:100%;
    width:100%;
    /* object-fit: cover; */
    /* background: #859398 */
  }

  .newsChild .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    font-weight: bolder;
    color: #FFF;
}
.newsChild:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}