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<https://github.com/rhoover/rhoover.github.io/blob/master/scripts/31134583.scripts.js> .
The solution lives in the CSS, changing within the pseudo-element *display: none* to *display:block*. The CSS on Github<https://github.com/rhoover/rhoover.github.io>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<http://tech.particulate.me/javascript/2013/10/10/how-to-conveniently-check-for-responsive-breakpoints-in-javascript/>, a responsive image solution translated into Angular. On Sunday, March 2, 2014 2:48:19 PM UTC-5, Luke Kende wrote: > > 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. > > > > On Sun, Mar 2, 2014 at 4:36 AM, Robin Hoover <[email protected]<javascript:> > > wrote: > >> 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<https://code.google.com/p/chromium/issues/detail?id=236603>, >> the discussion around which mirrors my experience exactly. >> >> Question asked on >> StackOverFlow<http://stackoverflow.com/questions/22046170/explanation-on-window-getcomputedstyle-and-why-chrome-handles-it-differently>which >> also mirrors my experience. >> >> On Sunday, March 2, 2014 2:37:28 AM UTC-5, Luke Kende wrote: >>> >>> 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? >>> >>> On Saturday, March 1, 2014 4:19:45 AM UTC-7, Robin Hoover wrote: >>>> >>>> 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 >>>> >>> -- >> 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 >> [email protected] <javascript:>. >> To post to this group, send email to [email protected]<javascript:> >> . >> Visit this group at http://groups.google.com/group/angular. >> For more options, visit https://groups.google.com/groups/opt_out. >> > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
