SOLVED IN 1.4: Countdown time widget don't work on iOS

[davidovmihail]

Bricks Version: 1.4.0
Browser: Safari
OS: macOS.
URL: https://larsunrisa.com

time not display, and stretch create bugs

additional screencast with demonstration code: ScreenRecorderProject1 17 - YouTube

on iOS looks

how all looks on android

my code for the countdown widget

HTML

<span class="timer">%D</span><br>дней

CSS

root{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));  
  gap: 16px;
  text-align: center;
  align-self: stretch;
}

.timer{
  font-size: min(3.43vw, 40px);
  font-weight: 900;
  line-height: 1.20em;
}

.format{
  height: auto;
  padding: 12px 0px;
}

@media (max-width: 1135px) {
  root{gap: 8px;}
}

@media (max-width: 640px) {
  .timer{font-size: 6.88vw;}
}

[timmse]

Hi Davidov,
Thanks so much for your report!

I was able to reproduce the NaN issue on iOS and added it to our bug tracker.

The alignment issues are probably related to your custom grid settings, which may interfere with the default styles? If I use your grid settings for the timer, it shows as it should (even on iOS, except for the NaN issue).

Best regards,
timmse

[davidovmihail]

same way? or stretch?

if like this then I don’t understand what is the problem

I try to delete this stroke of code align-self: stretch; and give this result

I check caniuse.com and i see good compatibility

ok, all my website use CSS grid code

.gcsss{
display: grid;
align-items: stretch;
}

.grid-css {grid-template-columns: repeat(4,minmax(20%,1fr));}

.col1 {grid-column: span 1;}
.col2 {grid-column: span 2;}
.col3 {grid-column: span 3;}
.col4 {grid-column: span 4;}

why then the whole site does not break on IOS?