Blink Not Working in Chrome

Blink not working in Chrome

Add following code to your css file,

blink {
-webkit-animation-name: blink; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}

blink in modern browsers?

You don't have to make a class. Use the traditional tag and simply add CSS for it.

Via Straight CSS:

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

Straight CSS Added Via JS

if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}

---

/* Standard (Mozilla) */@keyframes blink { from { opacity: 1; } to { opacity: 0; } }/* Chrome & Safari */@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

<p><blink>I Blink</blink></p><hr /><p><noblink>I don't</noblink></p>

Chrome not showing OPTIONS requests in Network tab

You'll need to go to: chrome://flags/#out-of-blink-cors, disable the flag, and restart Chrome.

This is an expected behavior change according to:

https://bugs.chromium.org/p/chromium/issues/detail?id=995740#c1

I originally came across this via:

https://support.google.com/chrome/thread/11089651?hl=en

How to detect Blink in Chrome

Blink is Chrome 28+.
So if you are already detecting Chrome via its useragent you could just check: version >= 28 Though not fully reliable if the user agent is spoofed, obviously.

For an additional more reliable way you can check the chrome.notifications API status which became available/stable with Blink/Chrome28+ (on ChromeOS, Windows, and Mac and then Android 4.4)

See this answer for ref, and this documentation for details.

UPDATE: That previous idea was complicated and unreliable. I removed it.

I ran into a feature that was added with Chrome 28 (namely CSS.supports) which is easier and cleaner:

if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window){
//Blink Engine
}

UPDATE 2: Added an extra check because some Blink browsers like Opera Mobile or Maxthon lack the window.chrome object. A v8 feature check is necessary to cover all current Blink engine browsers as of Dec 2014.

And for completeness since you asked for a server side programming language too:
On the server side or even for JS eventually, just look for WebKit/537.36. Only a Blink user agent will have that Webkit version. No official Safari version was released with that build number as far as I can tell. However, watch for the IEMobile, Trident or Edge tokens since Windows IE now imitate Android and Blink.

Glyphicons blink on refresh in chrome

Generally, this is a problem with having a flash of unstyled content (FOUC).

Specifically, this is what Paul Irish calls a flash of unstyled text (FOUT):

In Firefox, basically the text is in a default webfont until the custom font is ready

Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self

In other words, this issue isn't so easily overcome.

You can attempt to minimize the impact by:

• Using gzip to shrink the file so it downloads quicker
• Using caching so the client can use an existing copy rather than grabbing a new one.

The heavy handed approach would be to wait to display the page to the user until everything was rendered, but I would strongly recommend against this. User are very impatient for initial load times but are considerably more forgiving when it comes to rendering additional content.

chrome inspect blinking with remote debugging

Same behavior here: neither Galaxy S4 nor Galaxy S6 Edge with Lollipop were available on the chrome://inspect tab. I develop an Ionic/Cordova app and downgrade isn't an option. But if you download latest version of Chrome Canary the device is available to inspect and I can debug again.

Why Google Chrome browsers use -webkit-* prefix, while Chrome runs on Blink (except IOS, where they run on webkit)

Google Chrome used to use Webkit until Chrome 28 when it was replaced with Blink, a fork of Webkit. Whilst using Webkit, Chrome had access to all -webkit- prefixes.

When the change to Blink was made, the development team decided not to add any new vendor prefixes to the Blink engine. Vendor prefixes are intended to let web developers try out new standards until such time as they are properly implemented, and the Chrome team felt that this could be better done by enabling/disabling an un-prefixed version of the feature from within the browser. The Chromium site states:

...instead of enabling a feature by default with a vendor prefix, we
will instead keep the (unprefixed) feature behind the “enable
experimental web platform features” flag in about:flags until
the feature is ready to be enabled by default.

For compatibility reasons the old -webkit- prefixes were retained in Blink (removing support would break sites that relied on Webkit prefixes). Due to the above reason they were not replaced with Blink specific counterparts, and since Chrome 28 no new prefixes have been (or will be) added.

---

Related Topics