diegomura / diegomura/react-pdf

Borders render inconsistently in Adobe Acrobat

Open
#3,246 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
When rendering a table using CSS borders, the result varies between PDF readers.
It works fine in Chrome and in the MacOS preview app, but when opened in Adobe Acrobat some borders phase in-and-out of existence based on zoom-level.
This is a crucial problem, because many people use Adobe Acrobat to view PDFs.

Issue seems to be similar to: #302

**To Reproduce**

Download the PDF from the snippet, and open in Adobe Acrobat. When zooming in-out you can see some borders getting bolder while others disappear.

~~[REPL](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf80503253003c00888c0202d86614c45557d400a02180732cd0027801b0cd8037a8891001d002310004c4405f0e5db556a00d490600ee316649951c460550fa289ea611804e7c003b480667cc440c9b387482680054305160cda401b4cc6dc2a0008440c454006860a5038272dcf8545490c00400b86000d8d3b27283959c54319d92a0a04098ca0118aa6a75d40174027a7330226115aa7ba801e8c222b487740d8d4d2c2462e3e4a08c4001845398c032b216833c245168919c3180a091c0ca01c99c408d1fba4fb498f99c048aca000c1f13bf5069f6e2cd22ab732c5a1f108b25524709b8328232800104c448011809ec0562619cef146a28c481514000164f0e80200a424d4504f20522a94608f7285499cced1d41ace00128e2a9504ea9286a0f99f2a8e8b1a4b2633048cb51d4484acaceb3866c1288f4a651527745627178ce412d88d5e6cb28e4ca4d3390026064db6dacc2b149edcf29bb6502c688a0462896cba54685bcbc6b2e9a4355e0f5425356b292c2acf0a48a40dc75b5a212a6dc7e309d6e06dbedd4da4015919a5d947bd9de9e6d6f901e168bc5300e84782e1dcde746d1be6c655dda0a27465154c6dd1fae45f66026ec6162dc5e273799e5c763ce935d1cd5eb5ece4fafd2d903d503edd0df37b7da8defb4c3b9bde2149c9da6e4ba84566e7b7fcd2fcd8f25a4489e1b85215a723b881a881e1c9724db3eb519e8290621a760865037ae6778c6ca93e3186a6fb4e7ab7e86bce8b99a4595a6bba1da26eb4abaebb41f927ab071e8c782ad8a11d9766180cf19f2d850eb87b03478e5096a538ea33891399617f8512b95150782744410c4d15c0c18dafaec67c9c65e686f1609c903a89c27f127189c98c24457e48a91bf84405801404961a550aa76ed5b299f16947bc146459a8a09cca3e224265312c46105c13e88609893948673849735cb73dce6800442f118997a8c65aa04742d22c9b6b91cba01ab8f927279906e9271f9704e9ee650ad884201b89d3d50b3e9c1b71dd50c8a1f0c0000d6020bc081802a1ec6219e4f000c42a3004b52d8f0d1f9710f29f0614c59311512695b2b952e555034f49e4babbbce8d5b12d58c48634ed6759d99d352f5a85747750da378d2024dd34a4736728b72da0dad61a685b4eda27ed29a1d027c9156b9d47ceb5779af6e4cc436fe735f39b51d5755f43d6d9f584de3c358d1354d335038f0832b700e0f5e90d26db79930ebec5548f0f32c7651c0463c12d5ea75d58e1e4d7553d7134f5937dbbdfd57d14efdff4d3ce02d0ceadeb4b3a31b371873139733cf0588c9d4a60b4130b575f63740572f4b04cbd44f9e24c7de6ce8df6537f75380dabc0c6b8cd6b9b6b3d0fe19cc1d775f38a40b7765b92d0c36ee376f3b32e3b78f135c6cbb987bcaf7bb36fb74ffb4cf321b543ece8706f876449bfcdb9a8d815b9d57742771cf4f8f3d9f5a7cec67a9dcb4ad5300de7eae839ac4341ceb21d0eb0f9846f8291e5566cc7f5d5656ee6cddbbfcbdbedfaf5c367fdeab43c3345ea225f0765e7cd3145bb4e87172c897251715c371dc0f0c0d96bc794150994f25447d5d47b5df658edbca81af2768285387724ec840ca40ace7dcbd80f5a6f353c0a0a3ee084fa8c60013d42b7f6e6bfc9cbfe1ae28d0052f67422dad98b562b6cb3a6f4ceb69e59d0ff4f02558fb05a2833c1a0cf818360160b3e382c39c37c1989087ff621b98d18af774943b48b737ab427b8d0aee303806b5661b9c907b0ce1209b58f0ec18540474f211ce4886c89c84029bb489c6a63821b7461a7894693051f42d4620fcec8350607794bc2f5b97712822ab810852f3da39d7074f45245d64b112c547dd64e0ed607d0f4eca3158fd3deac381a68cf1499bc48e5f1d647f804e1141391b588b6a43b7390d5e5136ea77701f1262430a714c352420fde1923c68f2f17a2bf8188298e48a52353a8bcc25a90897c9406d4c7af52c045e4710939a67b16183dda470ac9983ba79f5c133d3e1cf129312246949d0132a054cade293167a8b719933a7648d93502fbc52be34122a3cd24d31f8108554d31e82301606c038010000dc640c800031700501e435c3f8d011a1e052ade0981203102209e000790804607c0a83741019c300278628a01b8080250a614c4f010a140086807c0ee300790a009814c08053040262ec5530001b874000cc53000268007d108001a4f439410000038003a8802e58a0002a8a85e54c0854000d0009c7c0310624d8501567a820520b402403f1d60700c0000cad08ad5520c0181217006b874a303c2ec8ca0d419423630453af2cac8c460b34568ed02a006d24304000499e240000bc214f8328feb4b3a852cd255237ad2494ad80ca8c00651e32854847d537645b0f6030266a16e52e92548decec6d55827810052052282ad865690cca1d0dc0a04ca8c55b1b4ba6009875416f8bf08a306b689d08136412d5c0b62ec7d84c1cd11b7bea949f865278394a08002b040d00902781107b0ad1b026d790090005a4508ea8c03ab00a3a7e1fc30093b435d259d5508d702b204283030d2803c168282a85ac1051e06a0881503a00c05318831aa000)~~ [sandbox](https://codesandbox.io/p/sandbox/k27wlq)

**Expected behavior**
Borders should stay consistent

**Screenshots**

Image

**Desktop:**

- OS: Tested on MacOS and Windows
- Browser: chrome
- @react-pdf/renderer@4.3.1

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.