I just upgraded to Chrome 12 and I'm noticing that my "meter" styling no longer works on chrome.
I was using something like:
meter::-webkit-meter-horizontal-optimum-value,
meter::-webkit-meter-horizontal-suboptimal-value,
meter::-webkit-meter-horizontal-even-less-good-value {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cea), to(#7a3));
}
It was working fine until I updated to Chrome 12.
Interestingly, I can no longer see the user agent styles for these pseudo-elements with the web inspector, even on other sites that I visit. For an example, inspect Bruce Lawson's experiment:
http://people.opera.com/brucel/dev/html5-meter-style.html
I've also tried going over the user-stylesheet on the webkit trac page:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Is there a new way to style meters in Chrome?
I filed a bug with the Chrome dev team and it turns out Chrome 12+ require you to reset the default user-agent styling with "-webkit-appearance: none" prior to being able to override the element with one's own styling.
More specifically, one needs to add the following rule:
meter { -webkit-appearance: none; }
Here's the link to the ticket:
http://code.google.com/p/chromium/issues/detail?id=86009
Here's a jsFiddle:
http://jsfiddle.net/F8tJu/1/
Related
I have a button on my web-page that transitions the page from one section of the page to another section of the same page (ex. To jump from my bio to my projects). On both my web browser (Chrome) and Android device browser (Chrome), when I press the button it has an animation that smoothly scrolls the page. However, when I try the button on my iPad device (Chrome and Safari), the animation is not there, and the page just instantly jumps to the other section.
How can I adjust my code such that the animation works when I access the page from my iPad? Here's some relevant code below:
.fa-chevron-down:hover, .fa-chevron-down:hover, .fa-chevron-down:focus, .fa-chevron-down:active, .fa-chevron-down:visited, .fa-chevron-down:link {
text-decoration: none;
}
<a id="scroll-arrow" href="#about-me">
<i id="scroll-btn-header" class="fas fa-chevron-down fa-3x"></i>
</a>
Some CSS animations are not implemented in every browser. When they are, sometimes they behave differently across different browser engines because they are not in the W3C standards.
If your website is written with pure HTML/CSS/JS (i.e. with no frameworks like Vue, React, etc.) You have to handle this incompatibility yourself.
You have to add vendor prefixes to certain lines of CSS to make it work on Safari.
.example {
/* On Chrome and Firefox */
transition: all .5s;
/* On Safari */
-webkit-transition: all .5s;
}
My suggestion is that you copy and paste all of your CSS code into an online auto-prefixer which adds these vendor prefixes in for you.
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.
In one of my project, a bootstrap powered dark theme, drop-down menu in subnav isn't rendering properly in IE9. It works fine in firefox, chrome, opera and safari. I tried to debug it but wasn't able to find the problem. What may be the problem? Here are two screenshots depicting the problem -
1) In Firefox it works fine.
2) But in IE9 it appears as transparent, i.e., it is not rendering background color.
I have uploaded it on my server. You can check it live here - http://anujkumar.com/templates/dsadmin/
A place to begin your investigation of the problem may be the Microsoft Gradient Filter in your subnav.css file.
When you remove the following MS Filter property, the drop-down displays in IE 9:
.subnav {
...
progid: DXImageTransform.Microsoft.gradient(startColorstr='#1f1f1f', endColorstr='#1f1f1f', GradientType=0);
}
Also Bootstrap has an .reset-filter() less mixin for it:
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
It fixed exactly the same problem for me (Bootstrap ver.2.0.4)
Issue
Using the following just simply doesn't work properly in -webkit- and -moz- browsers:
#exampleElement {
background-color: red; /* For example */
}
#exampleElement ::selection {
color: black;
background-color: white;
}
Result: WebKit- and Blink-powered browsers
In Chrome, Opera, and Safari, ::selection's background-color renders as if it was 50% alpha but the font colour is correct.
Chrome 29.0.1547.62:
Opera 15.0.1147.130:
Safari 5.34.57.2:
Result: Gecko-powered browsers
In Firefox, the entire ::selection rule is ignored. ::selection's background-color just happens to be white due to #exampleElement's dark background-color (thanks to #BoltClock for noticing that)
Firefox 22.0:
Result: Trident-powered browsers
In Internet Explorer, (would you believe) everything is rendered perfectly.
Internet Explorer 10.0.9200.16660:
Is this just a flaw of these rendering engines / browsers or are there -webkit- and -moz- alternatives that I'm unaware of?
I've saved an example of this on jsFiddle, for people to see: http://jsfiddle.net/BWGJ2/
According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).
As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using
background:rgba(255, 255, 255, 0.99);
For more details, checkout the linked answer by tw16
Furthermore, this works for me on FF:
::selection { /* stuff */ }
::-moz-selection { /* stuff */}
But this does not:
::selection, ::-moz-selection { /* stuff */ }
But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.
There are browser-dependent versions. The version you're using was the standard CSS3 way, but then it got dropped from the spec. I dunno about its browser support...
And something else to consider: An ID-based CSS selector might "outweigh" a pseudoclass-based selector, resulting in the ID-based CSS always taking precedence. So try adding !important to your ::selection style to make sure it's always used when applicable.
Hope that helps!
Trying to implement this gallery on my website.
http://coffeescripter.com/code/ad-gallery/
It is noted in the css file that the next and previous buttons won't show up in IE6 unless a nonexistent background image is applied to .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next. The code they used is invalid, but it works. I have also tried using a color instead and it does work, but not what I wanted.
I don't want to point to a nonexistent image file or a blank.gif if possible. Does anyone know what causes this problem in IE6 and if there is a pure css workaround? zoom: 1 does not work in this case.
I presume your IE6 requirement is referring to the following snippet from the jQuery AD Gallery plugin's stylesheet, jquery.ad-gallery.css:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9;
}
The \9 at the end of the background shorthand rule is actually a CSS Hack targeting IE6, IE7 and IE8 — not just IE6.
Note: Paul Irish wrote a Comprehensive List
of Browser-Specific CSS Hacks back
in 2009 which highlighted this
attribute parsing bug in IE/Win:
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
If you don't want to use a 1 pixel transparent spacer.gif or non-existent file for IE (which would throw a 404 error), just modify the CSS to re-use one of the existing images in the gallery but specify the background-position's X and Y property to be off the screen:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(ad_next.png) no-repeat -9999px -9999px\9;
}
This creative work-a-round will allow IE 6-8 to display the previous and next links, but won't actually show the specified background image file, since the X and Y values position the background completely off the screen.
Don't support Internet Explorer 6. It's over 10 years old. Recommend your users upgrade Internet Explorer or switch to a different browser. Problem solved!