Visible flicker on search spinners in Chrome 38

(Dean Taylor) #1

Visible flicker on new loading spinners in Chrome 38

I’m seeing unpleasant visible flicker on new spinners in Chrome 38.0.2125.111 m (on Windows 7)

Looks fine in Firefox 33.0.2

In IE 11.0.9600.17358 noted an “X” appears to interrupt the visuals of the spinner

EDIT: This IE issue is now a separate topic: IE11 “X” appears to interrupt the visuals of the spinner in search box

IE11 "X" appears to interrupt the visuals of the spinner in search box
(Dean Taylor) #2

Tried disabling hardware acceleration - that fixed it.

Anybody else experiencing this problem?

(Gerhard Schlager) #3

I see this too. However, I see it only in the search field. The other spinners look fine. So, maybe it’s related to the “X”?

(Sam Saffron) #4

we had issues in the past with svg and font awesome spinners there due to the fixed panel and weird z-index rules

cc @awesomerobot

(Jeff Atwood) #5

I do not see any flickering on my machines. Can you duplicate this on other hardware?

(Kane York) #6

No flickering here, Ubuntu 14.10 desktop on Intel Haswell graphics.

(Dean Taylor) #7

Currently I am limited to a single PC device. This is the reason why ask for other people to test:

Anybody else experiencing this problem?

The “X” interrupting the spinner on IE11 should probably be split out into a separate bug?

(Sam Saffron) #8

I can see this on my desktop, its subtle but there.

(Dean Taylor) #9

Thanks for confirmation @sam

I have now created a separate topic for the IE11 spinner X issue.

(Jeff Atwood) #10

For the record the small inline search spinners you refer to as “new” have not changed to my knowledge. Only the big ones changed.

Edit: I was mistaken, compare 1.0 spinners in the search here

(Sam Saffron) #11

I have a fix I will finish working on tomorrow, it is a very complex issue.

There are 2 open issues

  1. Chrome does not like when you translate stuff back to scale 0 in the animation, it gets confused and renders artefacts when complex stacking contexts are in place. The simple workaround is to change it to scale back to 0.1 and animate it to visibility hidden.

  2. IE has janky circles cause of the technique used to get the circles. Our circles are actually squares using the famous border hack border-radius: 100%:

IE renders the circles slightly differently if its one of the 45deg rotated squares.The fix is to have the squares not rotated in any of the positions, but I need to work on getting this going, its not trivial.

cc @awesomerobot

(Jeff Atwood) #12

I don’t see janky circles in my IE11?

(Sam Saffron) #13

Looks like you are using retina there in desktop mode the scaling is not ideal

(Jeff Atwood) #14

This is 100% zoom:

I mean, we probably don’t want to render a whole circle at that size… it might make sense to have a simpler “small” and use the current version as our “large” spinner design but this is a different discussion.

(Sam Saffron) #15

I am not making this stuff up:

Its a subtle issue, regardless both of these will go away if we have a simpler “loading” indicator for the search field, instead of shrinking this down.

(Kris) #16

I can work on a simple replacement later today

(Kris) #17

Rather than having two entirely different spinners I went with a simplified spinner overall. This reduces some of the HTML/CSS overhead and should work in any (modern) browser.

Here’s a pen if you want to take a look (oh neat, didn’t realize codepen oneboxed!)

(Dave McClure) #18

Not sure if it fixes the problem, since I hadn’t seen it, but I’m digging the new spinner regardless.

(Sam Saffron) #19

It does fix the issue, I can confirm that. (had a local repro)

(Jeff Atwood) #20