html - 在 safari 或移动设备上,内容没有用边界半径填充 div
问题描述
嗨,我目前正在使用样式组件为网页制作横幅。横幅的边框半径为 50%,背景图像设置为悬停时动画。
在 chrome 上它看起来像这样:
但是,在 safari 和我的 iPhone 上,它不会填充右侧的容器 div,留下一条白线,如下所示:
但是,在播放动画时,它会填充容器。我将在下面插入我的代码:
import styled from 'styled-components'
export const BannerBackground = styled.div`
width: 100%;
height: 100%;
background-image: url(${props => props.backgroundImage});
background-position: center;
background-size: cover;
position: absolute;
transition: transform ease-in-out 1s;
border-radius: 10px;
`
export const BackgroundFade = styled.div`
background-color: rgba(50,50,50, 0.6);
position: absolute;
height: 100%;
width: 100%;
transition: background-color ease 300ms;
border-radius: 10px;
`
export const BannerContainer = styled.div`
cursor: pointer;
width: 90%;
min-height: 150px;
margin: 50px 0;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 10px #555555;
border-radius: 10px;
overflow: hidden;
&:hover ${BannerBackground} {
transform: scale(1.1);
}
&:hover ${BackgroundFade} {
background-color: rgba(50,50,50, 0.8);
}
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
`
export const BannerTitle = styled.div`
font-size: 3vw;
color: white;
z-index: 2;
margin: 0 40px;
text-align: end;
font-weight: 600;
text-align: center;
@media (max-width: 1000px) {
margin: 0;
}
@media (max-width: 800px) {
font-size: 4vw;
}
`
export const BannerSubtitle = styled.div`
font-size: 2.75vw;
color: white;
z-index: 2;
margin: 0 40px;
color: rgb(50, 255, 150);
font-weight: 600;
@media (max-width: 1000px) {
margin: 0;
}
@media (max-width: 800px) {
font-size: 4vw;
}
`
export const BannerTextContainer = styled.div`
color: white;
z-index: 2;
width: 60%;
display: flex;
flex-direction: column;
@media (max-width: 1000px) {
width: 80%;
}
`
export const BannerImage = styled.div`
background-image: url(${props => props.backgroundImage});
background-position: center;
background-size: cover;
width: 100px;
height: 100px;
margin: 0 40px;
z-index: 2;
border-radius: 5px;
@media (max-width: 1000px) {
height: 50px;
width: 50px;
}
`
反应代码:
import React from 'react'
import { BannerContainer, BackgroundFade, BannerTitle, BannerTextContainer, BannerImage, BannerSubtitle, BannerBackground } from './banner.styles'
const Banner = () => {
return (
<BannerContainer>
<BannerBackground
backgroundImage='https://images.unsplash.com/photo-1471174617910-3e9c04f58ff5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3750&q=80'
/>
<BackgroundFade/>
<BannerTextContainer>
<BannerTitle>MOT FOR ALL CUSTOMERS</BannerTitle>
<BannerSubtitle>FREE DURING COVID-19</BannerSubtitle>
</BannerTextContainer>
<BannerImage backgroundImage='https://images.netdirector.co.uk/gforces-auto/image/upload/q_auto,c_crop,f_auto,fl_lossy,x_66,y_33,w_400,h_400/w_784,h_784,c_fill/auto-client/e6dd6944a9f58f246c0a0d687f6725f7/mot_logo.png'/>
</BannerContainer>
)
}
导出默认横幅
我无法弄清楚为什么会发生这种情况,有人可以帮忙吗?提前致谢。
(我还必须解决在动画过程中边界半径消失的问题,这就是 translate3d 部分的用途。)
解决方案
推荐阅读
- excel - 将所有文本框(包含在每个工作表中)复制到 Word 文档
- python-3.x - 在 Linux 服务器上托管基于 SimpleHTTPRequest 构建的 python 应用程序
- javascript - 如何检测用户是否触发了滚动事件与 window.scroll?
- node.js - AWS Personalize 发送事件
- r - 如何将字符转换为日期格式?
- cakephp - CakePHP 4.1 保存 belongsTo 关联不起作用
- javascript - React Redux - 在调度问题之前快速闪现之前的状态
- node.js - Nodejs typescript 测试依赖
- excel - 如果它包含某些文本,我想使用 VBA 将行复制到另一个工作表
- python-3.x - 如何在Python中的List中的String值中获取特定字符串