这是Chrome漏洞吗？

Question

摘要

我正在使用chrome84。当视频标签与倾斜的父网格结合使用时，并且当视频设置了要覆盖的边框半径和对象适合度时，视频中会出现多余的部分不应该在那里。这是Chrome <= 84错误吗？还是我只是弄乱了样式？

示例图片：

工作示例：

.parent {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(1, 300px);
    grid-template-rows: repeat(1, 500px);
    transform: rotate3d(1, 0.5, 0, 45deg) translate(50px, 50px);
}


.parent video {
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

Answer 1

我不知道您是否可以将其称为chrome bug。

原因似乎是由于边界半径，视频正在移出其父容器之外。

您可以删除边界半径

.parent {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(1, 300px);
    grid-template-rows: repeat(1, 500px);
    transform: rotate3d(1, 0.5, 0, 45deg) translate(50px, 50px);
}


.parent video {
    width: 300px;
    height: 500px;
    object-fit: cover;
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

或者将转换应用于视频，然后让父级自动调整内容的大小

.parent {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(1, 300px);
    grid-template-rows: repeat(1, 500px);        
}


video {
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
    transform: rotate3d(1, 0.5, 0, 45deg) translate(50px, 50px);
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

希望这对您有用。

Answer 2

“溢出：隐藏在父级？” – main search page

如果将父元素溢出设置为隐藏，则问题消失。

Temani Afif

def parse(self,response):
    for href in response.xpath('//*[@class="link link--minimal"]/@href'):
        yield response.follow(href, self.parse_property)

        # # follow pagination links
        # # can't get the href
    page_nums = response.xpath('//*[@class="listings-pagination-select"]/select/option/@value').re(r'\d+')
    page_nums[0]=''

all_list = []

#beforeUpdating
for j in all_list:
    if j == csvlist[0] #considering all names are on index - 1:
        #cancel upload
        break
    
#AfterUpdating
for i in csvlist:
    all_list.append(i)