-
Posts
-
Hi,
wir haben ein gradient Darstellungsproblem im Safari & IE Browser.
es betrifft die Klasse
h2 .av-special-heading-tag
Diese wird von beiden Browsern falsch interpretiert. Hierzu bin ich auf der Suche nach einer Lösung
Auf dem Safari Browser wird diese überhaupt nicht dargestellt bzw ist nicht sichtbar. erst nach markieren und hovern ist diese sichtbar. Im safari browser sollte das darstellen des gradients ja möglich sein.
Im Internet Explorer wird es auch falsch dargestellt bzw hat einen blauen Hintergrund.
Aber der IE kann ja auch kein gradient darstellen, wenn ich richtig informiert bin.Was wäre hier die optimale Lösung um alle Browser abzudecken?
Habe versucht die Browser direkt anzusprechen
Beispiel IE:@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { h2 .av-special-heading-tag { background-color: red; } }Im Safari Browser dachte ich die Lösung könnte sein, auf display inline umzustellen.
Leider hat bisher nichts gegriffen.
Vielen Dank im Vorraus
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
#top #wrap_all .av-inherit-size.highlight-gradient .av-special-heading-tag { -webkit-background-clip: text; }Best regards,
YigitHi,
Code is currently not being applied. Please try flushing cache in your cache plugin and refresh your page a few times. If that does not help, please post temporary admin logins here privately so we can look into it.
Best regards,
YigitHi,
I added the code to Enfold theme options > General Styling > Quick CSS and it worked. Please review your website.
Best regards,
Yigitok this is strange
you changed it on the test site
i added the code in the live site in enfold child style.css
but it is still not working there. what i am doing wrong?Hi,
Please try changing the code to following one
#top #wrap_all .av-inherit-size.highlight-gradient .av-special-heading-tag { -webkit-background-clip: text !important; }If that does not help, please post logins of live site as well so we can check it :)
Best regards,
YigitHi,
I simply flushed cache and it worked. Please flush browser cache and review your website :)
Best regards,
Yigitit has still that blue background instead of a gradient. it dont has to be the gradient. is there a way for a fallback method for IE? so that the text is just black ?
This would be nice.
Greets
Hi,
I am on a Mac therefore i could not test your website on IE. I asked my teammates to check the thread :)
Best regards,
YigitHi,
Pushing or replying inside, does not get it back to our attention, just so you know! :D
Best regards,
Basilisok sorry!
i just recognized, that on Microsoft Edge my whole h2 with gradient is invisible.
so i need to fix it for edge and internet explorer.greets
as it seems i am on the right way. in edge development tool i tried :
background-image: linear-gradient(90deg, rgb(81, 180, 219), blue, rgb(81, 180, 219));
and it is showing my text again.
but when i do :
#top #wrap_all .av-inherit-size.highlight-gradient .av-special-heading-tag {
-webkit-background-clip: text !important;
background-image: linear-gradient(90deg, rgb(81, 180, 219), blue, rgb(81, 180, 219));
}nothing is happening, also after empty cache.
Hi,
Sorry for the late reply, I’ve been testing gradient text with IE11, and I have found that the css used for this effect doesn’t work in IE11. To see please check out this site
with Chrome or Edge:
with IE11:
Best regards,
Mikethx mike.
but is there a way to do a fallback solution only for IE and Edge?
i would like to show it without gradient then. but actually you will see no headline when you are on Edge. So i need to solve it without loosing my style for all other browsers.thx in advance
Tom
Hi,
You can add an actual image or svg instead of text. Unfortunately, that property is not supported on IE.
// https://codepen.io/brenna/pen/mybQVx
Thank you for the update.
Best regards,
IsmaelHey Ismail,
thx for your help. but i dont want to do it with svg.
its working on every browser except Edge
Fun Fact: i tried Microsoft Edge Dev on my Macbook and there its also working.
so what i need is just a fallback solution for Edge on Windows.Is there no way to set a specific css rule that only happens for Edge?
i tried
@supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}but it doesnt work.
any more suggestions for that?
greets
Tom
Hi,
To only target the Edge browser:@supports (-ms-ime-align:auto) { your_css { your: rule; } }For IE11:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { your_css { your: rule; } }Best regards,
Mike@supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}i tried different rules for Edge, but nothing happens. as i wrote in my post before
Hi,
Thank you, as I inspect your element I find that the “-webkit-text-fill-color” in use is not a standard and not supported in IE browsers. I believe that this css will correct:@supports (-ms-ime-align:auto) { .highlight-gradient { -webkit-text-fill-color:red !important; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .highlight-gradient { -webkit-text-fill-color:red !important; } }But I couldn’t login to test it, please check the admin login so I can test and adjust this if needed.
Best regards,
Mike
- You must be logged in to reply to this topic.