homebrewery: Grey boxes / shadows around blockquotes (Mac Preview)

As described here: https://old.reddit.com/r/homebrewery/comments/ch3v0d/psa_grey_boxesshadows_around_notes_stat_blocks_etc/

This issue is still a thing. OS: macOS 11.5.1 Chrome: 92

Seems like certain renderers like the macOS Preview App still have problems with the exported box-shadows.

Stupidly, if I replace the box-shadows with a drop-shadow filter, everything renders fine in every PDF App I have:

.phb blockquote {
	/* workaround for grey boxes around blockquotes */
	box-shadow: none; 
	filter: drop-shadow(2px 4px 6px #888);
}

Same holds for other elements using box-shadows like elements with the class descriptive:

.phb .descriptive {
	box-shadow: none;
	filter: drop-shadow(0 0 6px #faf7ea);
}

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 20 (9 by maintainers)

Links to this issue

v3.7.1

Most upvoted comments

Following the issues encountered in #1661 , we might need to undo the changes to V3 back to using box-shadows since drop-shadow makes text unselectable and corrupts image quality.

This actually seems to make things objectively worse. I’m also thinking we might want to go back and undo the change to V3 as well. Selectable text and good image quality in almost every PDF viewer is preferable to just catering to the weird edge case in Mac Preview.

calculuschild on Dec 16, 2021

We went ahead and changed to drop-shadows in the V3 branch. I think this should also be fine to add to the Legacy styling since it will only change appearance (very slightly) but positioning and sizing of elements should be the same. I.e., old brews shouldn’t “break”.

@Gazook89 Do you want to cook up another PR to apply this to Legacy as well? (I probably should have just had you add to #1577 but didn’t think about it until now)

calculuschild on Aug 26, 2021