CSS tip - maintain tile color (remove darkening effect when overlaying text)

[kyleheney]

I was searching the Community for this, then figured it out myself when I couldn’t find anyone else referring to it.

This CSS will remove the “graying” effect when you overlay text on top of a Tile. I’m using this because my tiles are basically just solid colors and I’d like to maintain the look even after adding text as an overlay. This also forces it to be black text, bolded.

<pre><span><style>
[data-test="tile-item"] .tile-overlay {background: none;}
[data-test="tile-item"] .tile-subtitle {color: black; font-weight: bold;}

[Darren_Murphy]

It seems that this doesn’t play well with Safari/IOS…

I recently tried this in one of my apps, using essentially the same CSS:

<pre><span><style>
[data-test="tile-item"] .tile-overlay {
	background: none;
}
[data-test="tile-item"] .tile-subtitle {
  white-space: break-spaces;
  color: white;
  font-weight: bold;
}

In the builder and on Android devices, I see the expected result, which is:

But with Safari/IOS…

Any CSS masters know how to fix this one?

[Mark_Turrell]

I’ve been experiencing this myself with users on iPhone XR and 12. It would great to have a work around, otherwise I have to rebuild the screen thanks!

[kyleheney]

Great catch! Hoping there’s a workaround.

Also, it would be even better to have a native option to disable the dimming effect — it’s especially needed when tile images are simply a flat color and you’re trying to match other styling in the app.

[Darren_Murphy]

yup, that’s exactly what I’m trying to do

[Darren_Murphy]

So I managed to resolve this one, but to be honest I’m not really sure what the problem was.

After a bunch of testing different IOS versions and other trial and error (thanks @ThinhDinh for prodding me in different directions and providing some clues), I finally ended up (in desperation) changing the image that was being used with the tiles - and that immediately resolved it!

Originally I had a simple blank 300x100 image that I’d uploaded to Glide. I changed that to fetch an identical image dynamically from dummyimage.com, and that did the trick.

I’m at a complete loss to explain that, but it’s working now and thats all I really care about

[Mark_Turrell]

I need that trick right now too!!

[kyleheney]

Interesting stuff! I’ll keep that in mind!

[ThinhDinh]

Yeah as we talked to each other in the chat, this is strange behaviour. What did you use to generate the original image?

[Darren_Murphy]

To be honest, I don’t recall. It was done quite some months ago - I wouldn’t do it that way now - I suspect I just made a png myself using the Mac preview client.

[L.M]

With Prince “Purple Rain” music and my lyrics:
Chorus:
“Purple tiles, purple tiles…
(repeat…)
Only want to see you designing these purple tiles !
I know I know, it’s tough…”
purple, so…