This seems like such an obscure and weirdly random issue, but I’ve come across this issue 3 times now in the past few years.

I’m working on my React frontend app for Sudoku puzzles (which is related to many other past personal projects, which I’ve posted about here).

I have a nested set of grids representing the cells of the puzzle. To support ‘pencil marks’ when working on solving a puzzle, each cell has an overlaid 3×3 grid that displays the grid of current pencil marks. To display this I’m using an opacity of 40% to display them slightly greyed out. See the top left cell here with opacity:40%

Running locally this works as expected. When built and deployed and loaded from a remote server however, the logic for clicking and entering pencil marks works exactly the same, but nothing is displaying in the grid – here I’ve entered a pencil mark of 1 in row 2, col 1:

The HTML clearly shows a value of 1 but nothing is being displayed. If you look at the CSS on the right you’ll see opacity:1%, which is why the value is not visible, but that’s a difficult difference to find when comparing local vs deployed.

This is a known issue with create-react-app based React apps and a specific webpack plugin that optimizes CSS, discussed here.

Instead of using a % value for the opacity, change it to a decimal fraction of 1 instead, so instead of 40% use 0.4.

This site uses Akismet to reduce spam. Learn how your comment data is processed.