css - 为什么 safari 上的轮播转换有问题?
问题描述
嘿,我已经从这个库https://brainhubeu.github.io/react-carousel/docs/examples/clickToChange实现了一个轮播组件 ,它在 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
这里是 CSS 属性:
.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);
}
谢谢大家的时间
解决方案
您需要将-webkit-
前缀添加到您的 CSS。用途:@-webkit-keyframes News
以及-webkit-animation: News;
推荐阅读
- php - 使用 php excel 将 html 渲染为 excel
- azure - Azure API 管理器 POST 请求/响应限制 65,535
- vba - Get Property As Integer 引发运行时错误 451:Property let procedure not defined 并且 property get procedure 没有返回对象
- php - 如何通过 SQL 将文本中的撇号发送到 DB2
- python-3.x - 位置参数的类型错误 - 继承
- odoo - 库存中默认的树视图
- android - 跨平台应用
- linux - 期望脚本输出
- php - php碳使用碳\碳
- jquery - 我在提交函数中有一个 ajax,我只想要这个 Ajax 的数据和第二个 Ajax 数据并一起提交只需在提交时合并数据