Fixing Monster Frame background in Safari for iphone and ipad #3526
Conversation
…nsterBlockBackground image URL"
5e-Cleric
added
tweak
The use of a grayscale image and blending was a deliberate choice for customizability of the monster stat block color (similar to what @Gazook89 was proposing for the whole page background in #3218). Changing this will break brews that have used this to adjust the color of the monster stat block. |
|
Is this a can't fix at Safari? |
https://bugs.webkit.org/show_bug.cgi?id=259081 There is the reported bug in webkit. |
5e-Cleric
added
the
P2 - minor feature or not urgent
|
Can someone with an iphone confirm the fix works (screenshot?) and also see what happens with this brew where the monster block is blended to be green? |
|
iPhone 17.5.1
|
|
Wait hang on |
|
Sorry I just opened the non deployment link without thinking, that’s the previous screenshot. Here is from the PR deployment, but without the green bit because it’s pretty difficult to open the css editor on my tiny screen (iPhone 12 mini):
Note, the top and bottom bars are cut off but a different issue |
|
The border image is not slicing as it should, but that doesn't surprise me, i did not provoke it, and it is out of the scope of this PR. |
How about this link? https://homebrewery-pr-3526.herokuapp.com/share/_h7ThoQlrJVc I can confirm that in chrome, green monster block still works in this deployment. 👍 |
| @@ -7,6 +7,7 @@ | |||
| @noteBorderImage : url('/assets/noteBorder.png'); | |||
| @descriptiveBoxImage : url('/assets/descriptiveBorder.png'); | |||
| @monsterBlockBackground : url('/assets/parchmentBackgroundGrayscale.jpg'); | |||
| @monsterBlockOverlay : url('/assets/parchmentBackgroundOverlayed.jpg'); | |||
There was a problem hiding this comment.
This graphic isn't used anymore, right?
calculuschild
added
🔍 R3 - Reviewed - Awaiting Fixes 🔧
|
Thanks for the link, here it is:
|
|
Ok, this seems to be working without messing up custom coloring. Thanks @5e-Cleric ! And thanks @Gazook89 for testing. Will merge now. |
Safari for mobile screens does not support background-blend-mode and background-repeat:repeat; in the same element, it deactivates the overlay, which makes our statblocks look grey:
A fix is set here, i manually overlayed the color with the image to make the background, and i'm changing it for the original.
This fix works, and other users will not notice the difference.