CSS Issue in Safari

casheets123 · 2021-01-21T22:22:13.262Z

I’m trying to use

-webkit-background-clip: text;

It works great in both Edge and Firefox, but for some reason, in safari I have to click on the page and or text for it to kick in. Anyone have any ideas? I wonder if it’s a bubble conflicting CSS issue and not purely a browser issue. Or Webkit not working in bubble? But it makes no sense it works flawlessly in all other browsers, and it actually works in Safari, but you have to click the text for it to show up.

And since it actually does the clipping, I can’t use a fallback colour either.

E.g.

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This works here, (in safari)

CSS-Tricks

Gradient Text | CSS-Tricks

This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text. h1 { font-size: 72px; background:

But when applying it to a text element in bubble,

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

…I have to click/select the text for it to show up. I’ve been !important-ing the hell out of it to see if it would override anything messing with it, but can’t find anything that works. And it’s only in Safari the issue persists.

joe5 · 2021-01-22T15:37:41.778Z

I was JUST having this same exact issue yesterday in safari as we launched visual.so.

@Bubble or anyone else have any ideas of why this would happen?

The fact that it shows up when the text itself is clicked was also super odd.

casheets123 · 2021-01-22T22:48:42.316Z

Yeah it’s really weird. Glad I’m not the only one seeing it haha, it’s doing my head in.
I can’t for the life of me figure out what’s going on either. I’ve emailed @Bubble about it, but not sure they’ll be able to help. Let’s see.

In the meantime, if you figure it out, please let me know yeah?

casheets123 · 2021-01-23T01:33:11.305Z

@joe5

I heard back from bubble, but as I suspected, Bubble won’t help with this issue since it’s involving custom code. I asked if they had any idea what could be causing it, but got the boiler plate “it’s using custom code, we can’t help with that”.

But having dug into this more, since it works if you do the whole thing in an HTML Element and display it as an iframe, and it works just fine it you rebuild out outside bubble. I figured it has to be something bubble related.

But I also found a really strange workaround. I tried adding some other properties to the text
to see if that would force it to display. And, to my surprise I found that adding an animation, in this case an animated text shadow, and setting the shadow colour to transparent, that kicks it into gear and it shows when page is loaded. It’s really strange.

I’m sure there is a better way to force it to show on load tho.

joe5 · 2021-01-24T18:30:22.974Z

That’s SO weird.

The text shadow property on the gradient text also worked for me. Great workaround find!!

natvancleve · 2021-04-01T21:37:35.200Z

@joe5 can you share your css?

I’m trying to get this to work rn

system · 2021-04-01T22:22:14.141Z

This topic was automatically closed after 70 days. New replies are no longer allowed.