Styling when within border radius

[mossypaul]

Hey,
Thanks for the react version of this, makes quite a big speed difference on our site.

One issue we have though, we place the video inside a div so that we can round the corners using border radius but there are some artefacts around the edge from this.

I can fix it within Chrome inspector by removing the width: 100%; on the ::before, is that needed? Or a way for me to remove it? There's also a slight white border on the righthand side, which I can fix by making the width 101%, which is a bit strange, is that just something on mine?

`

<YouTubeLite
id="b-oUa0s8aZ0"
params={{ modestbranding: '1' }}
imageAltText="Closeup of sapling on hillside - YouTube thumbnail"
/>

`

.membership-video { border-radius: 10px; overflow: hidden; box-shadow: rgba(47, 53, 66, 0.11) 0px 11px 43px; }

Thanks!

[kylemocode]

Hey:
Do you have some image samples or codesandbox playground?
I have not encountered a similar situation after testing.

[mossypaul]

Hey,
Yeah sorry, I meant to include a link to the page where it's an issue but I was waiting until it was in production (the speed increase is currently worth the slight visual disturbance).

Here you go: https://mossy.earth/

Cheers,
Paul

[mossypaul]

I can see if I can replicate in a code playground if that's easier?

[mossypaul]

Hey,
This should work: https://codesandbox.io/s/compassionate-mestorf-3bmxk?file=/src/App.js

You actually need to remove the black background colour, and the width that I mention, for it to appear correctly.

The slight white border on the right must be something in our code, as it doesn't appear in that sample.

Cheers,
Paul

[kylemocode]

Hey Paul,
I find a relative issue, it seems like that there are some differences between web platforms.
Issue

I think -webkit-mask-image may be a workaround for your case ?

[mossypaul]

Ah, thanks, interesting, I'm on the latest version of chrome, looks like it's not solved as they mention there.

Annoyingly that fix then removes the box shadow :( and it still has black artefacts on the corners, just not so bad.

What's the reason for the background-color and background-image on the ::before? Removing those fixes it completely for me, but does that mess up something else?

[kylemocode]

I think they are just stying things, where I copied from the original web component version ref