diegomura/react-pdf

Page backgroundColor renders slightly off

Open

#2018 opened on Sep 12, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (13,687 stars) (1,116 forks)batch import
help wanted

Description

Describe the bug As the title states, I believe this is an issue with colorspace DeviceRGB colors being rendered differently.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

  1. Set the page style:
const styles = StyleSheet.create({
  page: {
    backgroundColor: '#64E0F6',
  },
})

or

const styles = StyleSheet.create({
  page: {
    backgroundColor: 'rgb(100, 224, 246)',
  },
})
  1. Add an image filled with the same color #64E0F6
  2. There's a distinction when rendered.

You can make use of react-pdf REPL to share the snippet

Expected behavior The background color should match the image.

Screenshots The page background is the top, the JPEG background is below. According to the digital color meter, the top (Page backgroundColor) is rgb(134, 221, 243) while the bottom is rgb(100, 224, 246)

Desktop (please complete the following information):

  • OS: macOS
  • Local
  • React-pdf version: 3.0.0

Contributor guide

Tech stack
javascriptreactnodejs
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScript basicsReact basicsFamiliarity with react pdf
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate how react pdf handles colors in PDF generation. The issue suggests a colorspace conversion problem (DeviceRGB). Look at the Page component and any color utility functions. Check if there is a color space conversion step that might be incorrect. Consider comparing with Adobe's PDF reference for DeviceRGB vs sRGB. Also explore any related issues or PRs in the repository.