Fix invalid calc() that silently dropped two box-shadows - #845
Open
AlexCherrypi wants to merge 1 commit into
Open
Fix invalid calc() that silently dropped two box-shadows#845AlexCherrypi wants to merge 1 commit into
AlexCherrypi wants to merge 1 commit into
Conversation
The blur radius and the spread value were both placed inside calc():
calc(var(--sz) * 0.143rem 0)
calc() accepts a single expression, so the trailing 0 makes the whole
function invalid. Per CSS error handling the browser then discards the
entire box-shadow declaration, not just that one value.
As a result .remote-button and .apple-remote-body .srcButton render with
no shadow at all. On the Chromecast skin this is easy to spot: the app
launcher buttons have a shadow while the round buttons next to them do
not, although both are meant to have one.
Moving the spread outside the parentheses restores the shadow the values
were written for. Twenty other box-shadow declarations in the same
stylesheet already use this form.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The blur radius and the spread value are both inside
calc():calc()takes a single expression, so the trailing0makes the function invalid. Per CSS error handling the browser discards the entirebox-shadowdeclaration rather than just that value.Two rules are affected:
.remote-button.apple-remote-body .srcButtonBoth render without any shadow today. It is easiest to see on the Chromecast skin, where the app launcher buttons cast a shadow but the round buttons right next to them do not, even though both were written to have one.
The fix moves the spread value outside the parentheses:
That is the same form the other twenty
box-shadowdeclarations in this stylesheet already use, so the intended values are unchanged — they simply take effect now.Found while styling a Chromecast remote and wondering why only some buttons had shadows.