We Keep Coding

Angular ng-style does not update in Safari

I've built a pretty simple carousel in Angular using CSS animations and it works great in Chrome, but when I decided to test in Safari I noticed the click and drag functionality does not work. I've been struggling with this for the past few days and I hope you can help.
After some investigation, I've come to the conclusion that the $scope.getAnimatorStyles method is being properly invoked but the ng-style="getAnimatorStyles()" is not updating the dom as expected.
I've tried to following with no luck.
Force a scope update by calling $scope.$apply()
Watch $scope.animationDelay and apply the styles directly to the DOM
Force the browser to reflow by calling .offsetHeight
Update $scope.animationDelay inside $timeout
The odd thing is that if I apply the styles to the document body it works which makes me think that Angular is doing something weird to the directive.
Here is a codepen with the slider code: http://codepen.io/jabes/pen/KNpEbq
Any help is very much appreciated.
Edit #1:
So I've made some progress by forcing a reflow. On click and drag I change the display property which works somewhat, but this also resets the animation so this is not a solution. I've also taken a couple GIFs to illustrate how the browser is not rendering properly.
Here is Chrome (http://recordit.co/fcmIdVntjC), notice how the animator element is moving along with the cards and when I change the delay property it also changes position along with the cards.
Here is Safari (http://recordit.co/V2bwhL877J), notice how the animator element is static while the cards animate and when I change the delay it moves but the cards do not change position.
Edit #2:
Okay so I've isolated the HTML/CSS and stripped out all Angular and JavaScript and the problem still persists. Safari does not update the animation position when animation-delay is changed in the element's style property.
Edit #3:
This issue seems unrelated to Angular altogether. I have created another post that illustrates a css animation bug in Safari: CSS Animation Delay Bug In Safari

Have you tried doing a console.log on the style object that is being generated and returned by the getAnimatorStyles() function? Perhaps there's something happening there that you're not expecting.
Also, can you copy/paste that same style object back into the template definition, just to test it and see if anything different happens?
When I'm totally stuck, I always double-check the basics just to rule them out. Sometimes, it is just a basic error that we overlook because we're looking for a more difficult problem which doesn't exist.

Formatting issue with CSS and Javascript

I have a website that has a moving background (code borrowed somewhere online) and I recently corrected an issue with the scroll bar not appearing but that actually caused another issue that wasn't very noticeable until I tried adding a new page.
If you go to http://theromdepot.com/ and move your cursor to the bottom of the page, you'll see a very thin white line start to appear. I just ignored it until I started adding a new page here: http://theromdepot.com/emulators.php. Now you can really see the issue. I'm sure the problem is in my CSS, but for some reason I cannot find it. I'd really appreciate any help, thanks.
CSS: http://pastebin.com/Up3WtmJ8
emulators.php: http://pastebin.com/UE78eMgT

It seems like your problem really lies in the CSS,but not just in it. I am not pretty sure what's the exact problem,but I ran the developer tools with Internet explorer and I have discovered this:
If you leave out the transform: matrix(1,0,0,1,0,0); property,the problem won't persist anymore.

PreloadJS doesn't work correctly for elements appended later (in Firefox)

I'm having a problem with how PreloadJS is behaving on Firefox. Actually it's hard for me to believe nobody else was having this problem before (couldn't find anyone describing same behavior) so perhaps I'm just doing something wrong... it works just fine in google chrome through.
Here's JS part:
$(document).ready(function () {
var preloadBG = new createjs.LoadQueue();
preloadBG.addEventListener("fileload", function(){
$('#light').css("background-color","green");
$("#container").append('<div id="image"></div>');
});
preloadBG.loadFile('http://i.imgur.com/ifvZ5Ss.jpg');
});
See example here: http://codepen.io/Deto15/pen/KdpRdx
You'll notice the behavior I'm describing if you run it with Firefox and Ctrl+F5.
So basically what I'm doing here is this:
On domready PreloadJS preloads image (it's not actually used anywhere on page yet.
On complete of preloading red circle turns to green.
Right after that new div is appended to page, and that div uses image preloaded earlier as background-image.
The way it behaves in Chrome is that image appears at pretty much same moment as when the circle changes color - and that makes sense since it's been preloaded. On Firefox through, the circle changes color and then there's a lag before image appears - as if Firefox was loading it again.
Is there any explanation to this behavior and any way to fix this?

Comparing the two in dev tools:
From what I can see, Firefox is not retrieving the image from cache while Chrome does.
One possible solution could be related to the image size, as detailed here.
I'd suggest testing with smaller images first to see if that resolves the caching issue.

Rendering bug in Google Chrome at certain window widths

My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65

(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.

Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.

Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.

Extra Space in IE table

Issue #1 -
I have read all about different solutions for getting rid of the "white space" in IE within tables, but nothing has worked so far! The page I am working on displays OK in Firefox and all other browsers. I have tried the height=100% command but that makes things so much worse and spaced out, and I have also tried deleting spaces between the different table and td tags but that doesn't change anything either. The images are exactly 115px square or twice that for a horizontal or vertical image.
Issue #2 -
I have an image gallery for each image that is SUPPOSED to appear when clicking on the image. It appears fine in Firefox and Chrome, but IE won't show the image gallery. Help on getting that javascript to work?
You can see our "live" site at www.tracystonearchitect.com (it is just the main home page - the rest of the site is in flash.. which we are working on converting) - it appears 100% correct in Chrome, the spacing issue and image gallery issue shows up in IE, and in Firefox the fonts I used aren't loading right.. which is another issue that I may have already figured out locally, but havent posted the updates yet.
I'm still pretty new at all this coding stuff, so may be a user-error. I've also been trying different techniques to fix these problems so things may be a bit awry based on my trying the different solutions. I'd appreciated any ideas or thoughts on how to fix the space-- or any other code technique comments!
Please help, I really need a solution for this.

As Per Issue #1
Do you have developer tools for your IE. This has become essential for me to troubleshoot and debug web pages. I took a look at your page. In the dev tools look for find in the menu and choose select element by click. Do this for several img. Look to the right of the dev screen and select layout. I noticed the offset varied between different pictures.
See this other SO topic How do I get rid of an element's offset using CSS?. Your on the right track with the css reset i saw in your code. Just keep going. The article mentions positioning as a possible cause.
As Per Issue #2
I wish i had more time to dig into this. I researched the error and found many hits most likely a syntax error. See this SO topic Possible cases for Javascript error: "Expected identifier, string or number"
I hope this points you in the right direction.