Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(ios): consistent box-shadow radius blur #10583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

SeanKelly369
Copy link

The radius blurring has been adjusted in iOS to match that in Android

PR Checklist

What is the current behavior?

The box-shadow radius amount differs in iOS compared to Android

What is the new behavior?

The box-shadow radius amount in iOS matches Android

BREAKING CHANGES: none

@cla-bot cla-bot bot added the cla: yes label Jul 11, 2024
@NathanWalker NathanWalker changed the title Box-Shadow: radius blurring scaling fix(ios): consistent box-shadow radius blur Jul 12, 2024
@NathanWalker
Copy link
Contributor

This would be considered a breaking change mainly because an app may quite drastically change it's visual appearance with this change - to many in unexpected way, however it's a welcome change but it would be considered a breaking change and would need to go into a minor release likely (vs a patch).

@NathanWalker NathanWalker added this to the 8.9 milestone Jul 12, 2024
@NathanWalker
Copy link
Contributor

Possible to post a quick screenshot of iOS/Android side by side on this?

@SeanKelly369
Copy link
Author

SeanKelly369 commented Jul 13, 2024

@NathanWalker sure thing. Take a look at the red box shadow at the bottom.

This is how it looks on Android:
Drop_Shadow_Android

This is how it looks on an iPhone 15 after the changes:
Drop_Shadow_after_iPhone15

This is how it currently looks on an iPhone 15 in production:
Drop_Shadow_current_iPhone15

@CatchABus
Copy link
Contributor

It's worth considering whether we should value native look-and-feel over cross-platform consistency or not.
Because in iOS, we have actual support for a complete shadow styling while android merely offers elevation and blur filter (with the exception of canvas shadow layer).

If we had to do such a calibration, I think android should match the iOS look 'n feel and not vice-versa.

@CatchABus
Copy link
Contributor

@SeanKelly369 I noticed some designers divide blur by screen scale.
I found a Sketch vs iOS shadow discussion here: https://stackoverflow.com/questions/34269399/how-to-control-shadow-spread-and-blur
Can you check if dividing blur gives you the ideal result?

@NathanWalker NathanWalker removed this from the 8.9 milestone Mar 14, 2025
@shiv19
Copy link
Member

shiv19 commented May 29, 2025

@coderabbitai please review this PR

Copy link

coderabbitai bot commented May 29, 2025

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

I'll help you review this PR. Let me gather the necessary information about the changes and provide a comprehensive review.


🏁 Script executed:

#!/bin/bash
# Get information about the PR
gh pr view 10583 --json title,body,files,additions,deletions

# Get the diff for the PR
gh pr diff 10583

# List the files changed in this PR
gh pr view 10583 --json files | jq -r '.files[].path'

Length of output: 3760


🏁 Script executed:

#!/bin/bash
# Let's examine the full context of the iOS background implementation
cat packages/core/ui/styling/background.ios.ts | grep -A 20 -B 20 "shadowRadius"

# Also look at the Android implementation for comparison
fd "background.android.ts" --exec cat {}

# Check if there are any existing tests for shadow functionality
fd -e "spec.ts" -e "test.ts" | xargs grep -l "shadow\|Shadow" | head -5

Length of output: 9830


🏁 Script executed:

#!/bin/bash
# Let's examine the CSS shadow spec test to understand the expected behavior
cat packages/core/ui/styling/css-shadow.spec.ts

# Let's also check if there are any platform-specific shadow constants or documentation
rg -A 5 -B 5 "shadow.*blur|blur.*shadow" --type ts

# Check for any existing documentation about shadow differences between platforms
rg -A 10 -B 5 "shadow.*ios|ios.*shadow" --type md --type ts

Length of output: 37054


@shiv19 I've reviewed this PR and have several observations and recommendations:

🎯 Review Summary

This PR addresses a legitimate cross-platform inconsistency in box-shadow rendering, but there are important considerations around breaking changes, technical approach, and consistency.

βœ… Positive Aspects

  1. Addresses Real Issue: The visual differences in shadow rendering between iOS and Android shown in the screenshots are significant
  2. Targeted Fix: The change is surgical, affecting only the iOS box-shadow implementation
  3. Visual Improvement: The post-change iOS rendering appears much closer to Android

⚠️ Key Concerns

1. Breaking Change Acknowledgment

// Current change
shadowLayer.shadowRadius = shadowRadius * 0.65;

As @NathanWalker correctly noted, this is indeed a breaking change that will affect existing app visuals. The PR description incorrectly states "BREAKING CHANGES: none" - this should be updated.

2. Empirical vs Mathematical Approach

The 0.65 multiplier appears to be empirically derived. Consider @CatchABus's suggestion about dividing by screen scale:

// Alternative approach to investigate
shadowLayer.shadowRadius = shadowRadius / Screen.mainScreen.scale;

3. Inconsistency with Text Shadows

The text shadow implementation in packages/core/ui/text-base/index.ios.ts doesn't apply this adjustment:

layer.shadowRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(value.blurRadius, 0));

This creates inconsistency between box-shadow and text-shadow rendering on iOS.

4. Missing Test Coverage

The existing tests only cover CSS parsing, not platform-specific rendering behavior. Consider adding integration tests that validate cross-platform consistency.

πŸ“ Recommendations

1. Research the Multiplier

Investigate if there's a mathematical relationship or Apple documentation that justifies the 0.65 factor, or test the screen scale division approach:

// Test both approaches
shadowLayer.shadowRadius = shadowRadius * 0.65; // Current
shadowLayer.shadowRadius = shadowRadius / Screen.mainScreen.scale; // Alternative

2. Apply Consistency

If proceeding with the multiplier approach, consider applying it to text shadows as well for consistency.

3. Update Documentation

  • Correct the breaking changes statement in the PR description
  • Add comments explaining the iOS-specific adjustment and its rationale

4. Version Planning

Given the breaking nature, ensure this goes into an appropriate release (minor, not patch) as @NathanWalker suggested.

5. Test Coverage

Consider adding visual regression tests or platform comparison tests for shadow rendering.

πŸ€” Questions for Consideration

  1. Have you tested the screen scale division approach suggested by @CatchABus?
  2. Should text shadows receive the same adjustment for consistency?
  3. Would a configuration option for shadow rendering behavior be valuable?

The fix addresses a real problem, but I recommend investigating the mathematical basis for the adjustment and ensuring consistency across all shadow implementations before merging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants