Chrome 33 Seems to Have Broken Angular

[Robin Hoover]

Chrome 33, all platforms.

Simple set-up: AngularJS can easily change the DOM, such as writing a CSS class to an element depending on certain conditions. This should be done with what's called a directive.

Big Problem: Chrome 33 is denying this simple ability to AngularJS. The simple Javascript can be found here : https://github.com/rhoover/rhoover.github.io/blob/master/scripts/6b8958af.scripts.js

This background directive was working, it no longer is!!

Same mis-behavior across multiple sites, multiple computers, multiple platforms (Linux, Mac, Windows, but not Chrome for Android), multiple versions of AngularJS.

Cross posted here in case it's totally a Chrome bug: https://productforums.google.com/forum/#!category-topic/chrome/report-a-problem-and-get-troubleshooting-help/windows7/33-Beta/UzAoyAL9xS0

[Luke Kende]

Can you demonstrate it in a plunker or similar?  I'm not having any trouble with Chrome 33 and manipulating classes in directives.

Have you debugged your directive to see where it fails? What kind of error are you seeing other than that it just doesn't work?

[Robin Hoover]

Thank you for taking a look!

tl;dr: There is indeed a bug in Chrome 33 Stable wherein the browser soils itself if you use getComputedStyle() in conjunction with setting your pseudo-element to display:none.

Bug filed with the Chromium team, the discussion around which mirrors my experience exactly.

Question asked on StackOverFlow which also mirrors my experience.

[Luke Kende]

Looks like you narrowed it down to a certain bug with getComputedStyle and pseudo classes.  Until that is fixed, have you come up with a work around?  Your original link to the script disappeared. 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/qdZp5wc5HiI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Robin Hoover]

Whoops, looks like because I pushed a new build up to master on Github. As it turns out, no changes were needed to the directive.

The solution lives in the CSS, changing within the pseudo-element display: none to display:block. The CSS on Github is minified, so here's the SASS/Compass of it:

%responsive-trigger {
    &:after {
        content: "phone";
        display: block;
        position: absolute;
        top: 0;
        left: -1000px;
        @include at-breakpoint($break-to-medium) {
            content: "tablet";
        }
        @include at-breakpoint($break-to-medium-large) {
            content: "small-desktop"
        }
        @include at-breakpoint($break-to-large) {
            content: "large-desktop"
        }
    }
}

By absolutely placing the content, it removes it from the layout flow and off-screen, yet is still available to Angular so she can add the appropriate class depending on window size for the bg iamge.

What's going on here was inspired by this author, a responsive image solution translated into Angular.

[Thien Pham]

I'm also noticing some weird stutter/lag on Chrome for Android v33.0.1750.136 that was never present before. It happens on when selecting an item from the side menu on my site. When the menu closes there's some stutter/lag happening. I tried on Dolphin Browser and this does not happen. I have an angular directive to delay changing the url location until the menu is closed. There is no noticeable issue using the latest version of chrome on OSX 10.9.2. The site is below.

www.qpham.com

[Thien Pham]

I fixed the stutter by delaying the url location change to 500ms. However when it was originally at 300ms, there's some noticeable stutter going on that was never present before. I uploaded my site with the stutter to:

Delay set to 300ms

http://obscure-oasis-3646.herokuapp.com

Changed Delay to 500ms

http://www.qpham.com

On Saturday, March 1, 2014 3:19:45 AM UTC-8, Robin Hoover wrote: