Problem

In cultures that use comma as decimal separator (e.g., Turkish tr-TR, German de-DE, French fr-FR), the TimePickerCell component generates invalid CSS for the scroll transform animation. The issue occurs because the CalcTranslateY() method returns a double value that gets formatted using the current culture's decimal separator when interpolated into the CSS string.

This results in invalid CSS like:

transform: translateY(-73,1875px);  /* Invalid - comma separator */

Instead of the expected valid CSS:

transform: translateY(-73.1875px);  /* Valid - dot separator */

Solution

Modified the StyleName property in TimePickerCell.razor.cs to explicitly use CultureInfo.InvariantCulture when formatting the decimal value for CSS output:

// Before
.AddClass($"transform: translateY({CalcTranslateY()}px);")

// After  
.AddClass($"transform: translateY({CalcTranslateY().ToString(CultureInfo.InvariantCulture)}px);")

This ensures CSS values always use dots as decimal separators regardless of the user's culture settings.

Testing

• Added comprehensive test TimePickerCell_StyleName_CultureInvariant() that reproduces the issue by setting Turkish culture and validates the fix
• All existing TimePicker tests (65) and DateTimePicker tests (58) continue to pass
• Manually verified fix works across multiple cultures (tr-TR, de-DE, fr-FR, en-US)

Impact

• Minimal change: Only affects decimal formatting for CSS transform values
• Culture-safe: CSS output is now consistent across all cultures
• Backward compatible: No breaking changes to existing functionality
• Focused fix: Surgical change that doesn't impact other component behavior

Fixes the TimePickerCell scroll animation issues reported by users in Turkish and other comma-decimal cultures.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.