I am using background-clip on a heading h2 in my website, but somehow is not working on Edge. In Chrome and Firefox is amazing, but when I open in Edge the heading h2 is there but with transparent (i guess). I checked on caniuse.com and says that is supported on edge. So I don´t understand why is working every browser less this one.
I used the same #supports(-webkit-background-clip:text) just in case it won't support somehow, but because it is supported doesn't work and the heading is transparent.
This is my code:
.heading__secondary{
text-transform:uppercase;
font-size:$default-heading2-size;
letter-spacing:0.3rem;
font-weight:600;
line-height:1.5;
background-image:linear-gradient(to right, $color-secondary-dark, $color-primary-dark);
display:inline-block;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transition:all .2s ease-in-out;
&:hover {
transform: rotate(-2deg) scale(1.06);
}
I just want to know what I have to do to show on Edge like is showing in the other browsers.
I try to test the sample code from MDN site and it looks the sample for background-clip is working fine in MS Edge browser.
Reference:
background-clip
I also tried to test your code above. If you try to see the applied styles using developer tools than you can notice that background-image and &:hover is not applied.
Similar result I got in both chrome and Edge browser. This can be the root cause for the issue. You can notice in the image below that background-clip is applied successfully in Edge and chrome both browser.
It means that some other style code creating this issue. I suggest you to use the developer tools to find the applied styles for any specific element on your web page may help you to find the cause for this issue.
If issue persist than please try to provide the detailed code example including your relevant CSS and HTML code which can produce the issue with MS Edge browser. It will be better if you also try to include the snapshots of the output from chrome and Edge can help us to understand the issue in better way.
Related
I was goofing around with the ::placeholder pseudoelement on Codepen (Chrome 59.0.3071) when I noticed something odd. (please see my JSFiddle)
In brief, this CSS should not enable a transition of the ::placeholder color over 2s:
input::placeholder {color:red;transition:2s;}
input:hover::placeholder {color:green}
Using Firefox, there is no color transition over a 2 second interval on hover (this appears to be correct according to this section of a W3C spec and this section of a different one - follow the thread to the ::first-line pseudo-element), but instead there is an immediate color transition to green;
However, the same JSFiddle using Chrome does show a ::placeholder color transition over a period of 2 seconds, which according to the specs, appears to be incorrect.
Is this a bug in this version of Chrome (and if so, is it being addressed?) or is this an indictment of my lack of understanding of CSS?
Currently, it seems that Gecko's and Webkit's implementations are very
similar. The set of allowed rules are slightly different and the
default styling isn't the same but those are clearly solvable issues.
-- From http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html
Non-standard This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
-- From https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder in its
selector.
-- From https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
But apparently both Chrome and Firefox apply no transitions for ::first-line, as is evident through this JSfiddle I made.
Also while I was searching on the net for answers, I found that the transition property for ::placeholder was working in an older version of Firefox with vendor prefixes which simply reconfirms the line from spec,
behaviour may change in the future.
Here's the code for the JSfiddle.
input::-webkit-input-placeholder {
color: red;
transition: 2s;
}
input:hover::-webkit-input-placeholder {
color: green
}
p::first-line {
color: red;
transition: 2s;
}
p:hover::first-line {
color: green
}
<input placeholder="Sup">
<br />
<p style="display:inline-block">This is the first line.</br> Check it out</p>
I couldn't find it in the w3c docs.
It looks like it used to work in some older Firefox versions.
A workaround with css could be:
input[placeholder]{color:red; transition:color 2.1s;}
input:focus[placeholder]{color:blue}
Which works in Chrome and Firefox.
I've noticed a strange issue with CSS transitions in MS Edge.
Basically if you have a transition, between hover states for example, but the styles defined for those hover states are over-written in the CSS cascade, Edge will switch to the over-written styling for the duration of the transition, then switch back.
The issue is described fairly well here too:
https://www.webmasterworld.com/css/4791912.htm
I have also created a pen demonstrating the problem:
http://codepen.io/powerbored/pen/OWqXRw
a {
transition: all 2s ease-in;
color: orange;
}
a div {
color: lightblue;
// displays in light blue in all browsers except during transitions in Edge
}
a:hover {
color: red;
}
I know Edge isn't exactly a great browser but I what I'd really like to see is an explanation of what is actually happening here and why it could be happening.
There's something about transition-property: all that's causing the descendant element to inherit the animated value during the transition, instead of keeping its specified value indefinitely, in Microsoft Edge. This appears to be so specific to Microsoft Edge's implementation of CSS transitions, that even Internet Explorer behaves correctly, and it only occurs when transition-property is all — if you specify only the properties that need transitioning, Microsoft Edge behaves correctly.
That's all I can tell you. Well, that, and the obvious fact that this is incorrect behavior.
I am trying to give a safari browser:
.selected1 :hover {border-width: 3px;}
and the other browsers:
.selected1 :hover {border-width: 2px;}
I read many ways how you can target a safari browser but also my chrome browser folows the lines. I didn`t find a way to only target a safari browser. Hopefully you guys have one for me!
Thnx
There’s no way to do this directly in CSS. You can detect Safari using JavaScript, e.g. with the following code:
if (!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
document.getElementsByTagName('html')[0].className += 'is-safari';
}
Then you can do something like this in your CSS:
html.is-safari .selected1 :hover {border-width: 3px;}
However, my recommendation is to avoid this. Detecting the user agent string is generally not a good idea.
The setup
I have a series of overlapping CSS hexagons created using pseudo elements with borders. I have hover styles to change the colour of the shapes.
The issue
This hover style is causing problems when the transparent part of the shape overlaps text in other elements, causing a visible corner cut out in the text.
As the problem is difficult to explain with words alone, here is a screenshot highlighting the glitch.
The behaviour
I believe this to be a webkit only issue as it appears in Chrome but not Firefox. It may be of note that I am testing this on a Linux Mint system.
The issue occurs when you hover over the small github hexagon and remains when you exit the hex. The issue is resolved only when the large logo hexagon is hovered over. Strangely, if you hover from the logo hex to the github hex the issue only occurs when you exit the github hex.
I have put together a simplified fiddle to demonstrate the issue: http://jsfiddle.net/chicgeek/JRAn5/
The code
I am using SASS, compass, and custom mixins. I've included a snippet of the compiled styles for the offending hex. For a fuller excerpt, see the fiddle above.
.social.github {
top:1.96875em;
left:2.0625em;
display:inline-block;
text-align:center;
width:0;
line-height:0;
}
.social.github:before, .social.github:after {
position:absolute;
left:-1em;
width:1em;
border:0 solid transparent;
border-width:0.866em 0.5em;
content:'';
z-index:-1
}
.social.github:before {
border-bottom-color:#c3c3c3;
border-top:0;
bottom:0;
}
.social.github:after {
border-top-color:#c3c3c3;
border-bottom:0;
top:0;
}
.social.github:hover:before {
border-bottom-color:#675e5e;
}
.social.github:hover:after {
border-top-color:#675e5e;
}
Note: For the fiddle I am importing from Google Fonts, though for my project I have a custom icomoon font. The bug occurs with either source.
The solution..?
Have you encountered this issue before? Do you have a few minutes to play with the fiddle code above? Do you have any suggestions for tactics I could try?
I'm happy to provide more code if it's helpful in diagnosing this problem. Thanks in advance!
Updates
A friend suggested it might be an issue with the font engine. The clipping resolves when the .woff is disabled. [source]
The issue is evident on Chrome 33 (Linux, OSX), Safari (OSX) as well as Chrome 31 (Win7). The issue does not occur on Chrome 33 (Win7).
I asked some work colleagues about my issue. One of them suggested applying -webkit-backface-visibility: hidden; on the logo elements. Voodoo, it worked.
Here is the revised fiddle showing the fix:
http://jsfiddle.net/chicgeek/JRAn5/8/
Now the thing is, this shouldn't work as -webkit-backface-visibility is a property specifically for 3D transforms. Though I don't know the specific cause of the issue, I believe my problem to be a webkit-specific bug and it is just chance that this property solves it. If anyone has better understanding of either the reason for the bug or the reason that this solution works, please comment on this answer.
I was wondering if someone can confirm that Chrome doesn't support transitioning the letter-spacing property. I wasn't able to find any documentation on this, but it doesn't seem to be working: http://jsfiddle.net/gjJwz/
That example works as expected for me in Firefox, but in Chrome 28.0.1500.95, the change is abrupt (no transition). I'm testing on Windows 7.
Just increase your `letter-spacing and you'll see it
a:hover {
letter-spacing: 50px;
}
http://jsfiddle.net/gjJwz/1/
Um, it works fine for me, I'm using the same version of chrome. Keep in mind that you can't gradually get to 1px of letter spacing, it would have to be a bigger value to ease in.