diegomura / diegomura/react-pdf

Border radius children clipping

Open
#640 0 comments 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
When setting `borderRadius` to a non-null value, children `View`s are not clipped. Meaning that if you set `backgroundColor` on children, square edges will show anyways.

**To Reproduce**
[REPL](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3b5006a483007718d3c44898a013928c660128f2548104005c3000b001a18e72d980c2204440cc5c0088f8789121cc40433dbcac01d49094a0002c5c01193d1878ccf9220085d0a041185c0198001955d43934a875f50ca1458d4c798001acf8cc4010c095fd03826042f55291302118413a3162bc827c868343c32221a217e2cc8aa04b189253d260326a353538a800543051608d248ce42011e4a126c56b2f397c78001c00b7500420460004917220b050330f0a03c1825860224468006486012000cf601810860180015958b15890122302218000cc783308052264a1e088f8149a2c8ea974412089e82c3235130002c8f0c0c0548f1b9942a001e96ef70bbd4e58d3d32aae6a8d65c6e77078b4c44f03460e4987bb7c7e3000289e3fa2884384cc9494622c512a9679910c21052c0a579198b07e980011d90560a47496b9662798352996711808494523e18463fc2961ac000dc90b9c0622edccd67b39d8108057c5002f444b0603c6812044625ea78ecb970a2728e28f9f0103c4f2f58080bc4d351a07c4c1c26c8a680cc81a51056430002a981110161722cb14c60010eabb98ea22733d98301726008e7820acffa63712eaae1eab7ec949b3d082a480ab049cc033ecff144408800f790ec3fddc0bcc45618926d40e3d743306f0803b364002fbc5fe5654a488295dc0047bb192040e1242917c2c0765d08bdd15791822cf1544ab5844d18170b30a66755e180a52c458165572b5a940da0422a9615d16004404198c30781f42f645732a5724c13c2bc443acab552a4841974e37244558da57468110f450c4718cd601009c40a14400bd18241a61013c4ac9122cf4ac0587630c0cdc5444202c152700e14832f7006c980d4d6c822402b7dc8f0bc69023575b8c022d093c4f8abdef181fa445e933c7f633ef68b9caac185c802a1da712b0c10003489a54b5430ab8356c30709a2d3240b53224d29abc4661ad24cbde92cda77f9513ad3c1cd1b081010bc580805b545a2aa46011cc718a661800e1e1a2e14b31647c1e157000c4cc7734ed33eb4bb9d3007f6817a0bd4b39c6296240ac4251fd5852a88e83090a2bd529e6bb8713c5032c51ab0aa72f5af2fdd6b00890404a6757a0fa40001b867385c6bb0cc074a0a74097a49072c85344783ad575e4ac06d2c2c49d73d3acc072fada946403161fd40d9d5e4894ec600a5a17bc597c19686c4d6c6a52a6d912a54a406916625241eb3faab1e0b1a0838e5b2c680b042a29135807bbe4160080edfa65ab3331e8f0049104e163c2355adc99082ca4c5bcbb99f0bac10b056ccaf819031737427fe08d090922f24133208114e3e848c6037a15de92f2064a42720cb243bca5d2cf72384b167c940012fa960cc2c52d90eb2d3b5fe7e9b1ba7e2ab12ec4de5454d83ef555d1d544db9794b53eed56695a4914c258ac5b1ec4705c000d8e205efc00956519d628882188378b112648d24c88f9f00065635424644464842738a791e67c344c482ba1e8fa01856118c6098a60cc398db137aff358111f7af4101c7d76314528470cfa9c27e9d5753dc57ec619e2c8578ef13e0600b43f0fe10210460921247184708d3977744f60ab9e2024c4949262240925a91d20644c9921ee1809c82f28b014d594538a4942dc5500f6d4d4187be87110d047b88ab803dd051a568a68f53e0cb83698a8b17264e8bb9ba6119e8cd8201f459c859066cce19739460b0318301c62642232e32654cc75740a712ef990b3163c4df56998727261d6b0eb15a1f17abb646c2c8f2038cd07d869a0e61cf400e84e28cd396739605c4b8573ae4dc12dc3b3a2e16f9e2a9e10ef4551984fbc2211f30067c6640a47e5485f8910fe6f20047f101560205bcb81482cb8e8a75382980c59566f2f98ac1a10c27c1b0b194086e5833115224a1c8a0d3d2d45688c14ea0c498029332ec4ab1711e2c88f88095d0031aeb5a3120ac58749700b25e4b8a452ca53abe9544dc56c74d1d28849e5c92325c49e9560ca0acacac5578bb2fb0396f2ce55cbb91985e49caf9674015859851c8d931b845300514d1102840ddd12bdd14a300df3a54ca301b2ae506c0549b178d2a3904bae12aa8886a9e77aac0d3c01266afcdeea6e0bccb47a9887eaa5528b0d782acb344129009359d15e371049e683346acb49b1ad4ea1b4b6a3d424624125e25004744e99d444174ec1585397741e9eac242f5913673c65f5384fd6b2de40183006a8d941ba17060cacd943310281619ed0c008cef3faa9a579509a365518c0d8e33fcb08099133b939094193708cb929a36372be2cb95e46691c50ab37f5480398fe0bcdccc95f356a818fd23001622ca3b8b496ef5c59e03967882e7f12528d855972c79ead3582352ede5f589471225c4da6069a8c81395b24036cc01db46c0ec2a93b17618c303bb4426a571a021f61c51ba5800e0148495812e8ddc38d2d1621563bc70b949c53b717d519d1b16777a31af380558d45cd3b36b2e9b9170745f5b5deb85246ee53bb27536e1dca6b0a0ddbdc7e3f73d4d232468f1f8e3d10f88943bc00405c79474018330560ec0083e33206406eb80280b21033e4536660f00480e06c25b108170001c8003c8403d0ac894331b59860cc300163a91f63fc670728e50d2323720f82590f8c016436ab94100e51fe4e3220941ca5cc191ca1ca0009a001f5ae000692d0abc400000e048201733c835c4a1ca2303d30003400270f0000826e7643ec1a4cc6c82a8423c4618bea6513806035f56897dea6aef93819e10605a31c1140a8170747342e1250f6068b5c100ff02a000565e3941d2e65be07b00e1af02bdc98ae443e00002492a4d606221f2ef1d50bc63e140310297b9049d6097c900d60c02e000130786e4668a01b9fbe7c0c00b1e0007acc0f19eb6466eb531104c6601b18e35c77ce5036b1c107445118a97382f5a80fd706e6461b8578e9ea29b34d66e6df9bf0516cdd9c87910a1c0b286e12a2b5de3d823ad759802772819d8bb4374e199b7b5d9221682b0b275915de871f6c03d5fba8d611335980a366ed9dd5b3ec36d6dd53dc6383edca0137bae6877bf911ec646bbcb6fac0d887190c6e6809bf7666cb1cc6cd86910825b9a0f1dadc27d719389a000b4d614a38a5db300c9cc064efc021c8382530ec01c3ee298911e9c4ab54f55da381b646b5c644a8bf749ef1fa986b8ec33f3b4ce91f726a79f7f629411ba6ed9ddde9b8f798f3dcc0af7b92806182c67a0603e77f6382e1010000e4980db2b7696ff24c6619ef4e9df2c6181f9e9db23e0eede684504efbed541bb62069140170aef383dd3e04274bcddf671eee6c2df4f941fdcef66341e43d9bbf3016c83580c01d0a01701a037428e1e9a3541791a031d72988005a000)

**Expected behavior**
Children corners should get clipped and edges should be right against the parent's border if there is no padding.

**Screenshots**

- `borderRadius: 6`
![image](https://user-images.githubusercontent.com/17004545/59549105-17764900-8f59-11e9-9863-f1a29d044f57.png)

- `borderRadius: 4`
![image](https://user-images.githubusercontent.com/17004545/59548994-0cbab480-8f57-11e9-9cc3-1688de936712.png)

**Desktop (please complete the following information):**
- OS: MacOS and Ubuntu
- Node.js v8
- React-pdf version v1.4.2

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.