
Chrome 22 breaks things - cvalleskey
http://chrisvalleskey.com/chrome-22-breaks-everything/
======
magicalist
for position: fixed and changed stacking contexts, you're likely running into
this:

[http://updates.html5rocks.com/2012/09/Stacking-Changes-
Comin...](http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-
position-fixed-elements)

Basically, the position: fixed on the parent of the span you're trying to put
on top is now making the parent its own stacking context, which means that all
children will be stacked relative to each other, not to the first absolutely
or relatively positioned ancestor of the parent, as it was before.

The easiest fix is to set the z-index on the parent, since that will correctly
stack it relative to its sibling (your other position: fixed element). The
other way is to give the sibling that you want to be below the other content a
negative z-index, since that will, again, specify it in the stacking context
you want to affect. Both of these fixes should render correctly in older
browsers (I believe).

This is annoying when it affects existing content, but it is part of the spec
now (and it's apparently how mobile browsers have always rendered it).

~~~
saurik
How much content does this break? Was this discussed on one of the public
mailing lists? If so, does anyone have a link to some relevant discussion? (I
would love to hear the various positions regarding breaking existing content
to bring an optimization used by browsers people generally consider to render
things weirdly to all browsers.)

~~~
jamesr_chromium
This was proposed here on the CSS WG public mailing list:
[http://lists.w3.org/Archives/Public/www-
style/2012May/0473.h...](http://lists.w3.org/Archives/Public/www-
style/2012May/0473.html)

~~~
bzbarsky
Yes, and no one other than WebKit folks seemed to feel it was particularly
warranted. Which makes this deliberate spec violation all the more interesting
to me. Nothing like sabotaging the standards process by deliberately trying to
force the issue in the field when you fail to convince people as part of that
process.

------
dangrossman
I've been seeing color abberations in text since my PC updated to Chrome 22.
Most noticeable has been blue links showing up with a purple tint --
significantly different from the color showing in the Inspector. It's browser-
wide, with extensions disabled -- I first noticed the change in link color on
a Reddit comment thread, then saw it on Google Plus and my own website as
well.

<http://i.imgur.com/Wjay2.png>

Has anyone else noticed this? I've been watching Google's "Past 24 Hours"
search result and only one other person has talked about a similar problem;
he's seeing the same thing but only on external monitors.

This is the first show-stopping Chrome bug for me... I can't work with a
browser that won't display the colors I tell it to display when designing
pages. Frustrating that I can't even get confirmation others are experiencing
it.

~~~
calvinlough
I've noticed this as well, for blue links. It's really bugging me. Are you
aware of a workaround?

Edit: I'm on a Mac, 10.7.5, FWIW

~~~
dangrossman
I haven't found one. I tried switching color profiles on my display, removing
extensions, upgrading to Chrome Canary -- colors are still off.

~~~
gbhn
There's new ICC support in Chrome 22. Perhaps that is interacting poorly with
some setting in your system?

~~~
dangrossman
I _think_ that change is only supposed to apply to rendering of certain
images, not text. Regardless, I went down that avenue as much as I could,
switching color profiles (as I mentioned) in my display settings and rebooting
to see if there'd be any change.

It shouldn't be the issue since ICC was already supported by other browsers,
and they're not showing this new text color abnormality, just Chrome.

------
JoelSutherland
Additionally, Chrome 22 changed the behavior of -webkit-font-smoothing:
antialiased so that the weight of fonts looks much different than it used to
when this was enabled. It makes icon fonts look especially bad.

<http://code.google.com/p/chromium/issues/detail?id=152304>

~~~
ward
Well it _is_ experimental for a reason.

As quoted from the bug report

> The webkit-font-smoothing css property is, contrary to the summary, still
> working. It is still respected, as no lcd font smoothing is being applied.
> However, the bug where it also affected the weight of the text as a side
> effect has been fixed.

Though it's worth noting they are looking into whether the purpose (and thus
the function) of this particular property should be adjusted.

~~~
FuzzyDunlop
Is this a case where the bug presents a better solution than the intended
design?

Your last sentence is reassuring that the developers appreciate this too.

------
eckyptang
Without wishing to piggy back on this thread I feel its a good time to point
out that this is exactly why enterprises stick with IE. People are risk averse
in businesses.

~~~
batista
Enterprise apps using IE have 1/100 of the design complexity of sites that are
affected by these changes.

~~~
eckyptang
You'd be surprised. The amount of CSS/HTML that goes into your typical LOB
application is quite large and the applications are typically orders of
magnitude more complicated than "sites" as you mention. The piece of kit I
work with has approximately 900 ASP.Net MVC views...

I just ran CLOC. We have 6.2 million lines of code in 14 different languages!

~~~
calinet6
It's orders of magnitude more complicated, and generally for no good reason.
There are often conflicting CSS rules, or 100 lines of cruft when 10 lines
might work just fine.

And yes, things break all the time, often for unknown or unexpected reasons,
and it's sometimes close to impossible to figure out why and fix the bug.

The enterprise software world is scary.

~~~
zevyoura
Are those problems really specific to enterprise software?

~~~
egeozcan
This "Enterprise Software" label doesn't make sense at all, anyway.

~~~
calinet6
Trust me, it does. It means "business software which sucks to an
incomprehensible degree."

------
jere
>Chrome 22 Breaks Everything

Followed by _two things_ that are broken.

~~~
cvalleskey
As I said earlier, I didn't mean that Chrome is completely, literally broken.
I meant in the sense of a user having just updated their version of Chrome,
going to a site, and not being able to do anything. For me and a few
coworkers, this was exactly what happened to us when we started noticing these
two issues last night. These two relatively minor CSS bugs have broken the
functionality of a site we have been working on to the point where it is
unusable.

~~~
buster
I've been using chrome beta for a while (so i'm at 23 now and was at 22 a
while) and never saw those problems. How many sites do you know that are
broken, apart from your own project?

------
gouggoug
Funny thing is that, if you use the Chrome Developer tools on the first
example "Floats don’t push block content down" and select in the source the
<h1>, the tools highlight the position where the <h1> should be, and not the
position it actually is. (a picture is better than a long explanation
sometime: <http://imgur.com/d5xnj> )

------
nthitz
Talk about an alarmist title of "breaks everything...". Appreciate the HN Mod
changing it.

~~~
cvalleskey
Oh, that's what happened? Apologies for the alarmist title, but depending on
your site's CSS this can completely destroy its usability. I meant it in the
sense of a user saying everything on a site is broken, not that everything in
Chrome 22 is literally broken.

~~~
egeozcan
I agree. Add too much salt to the food and people will say that you've ruined
it. Some people won't notice it because they are less sensitive or for other
reasons but the food, for some, is ruined.

This happens a lot with the software development where one simple bug in your
application makes the user say that "it doesn't work". We, as developers, tend
to get mad when all our work is deemed unfunctional because of a simple error
but we usually don't see that it is a "simple error" only from our
perspective.

------
AgentConundrum
I don't know if this is related, but I had an issue with flash yesterday which
seems to correspond to the Chrome 22 release.

I was playing a game which had never had a serious issue before, and I noticed
that the timing of things was way, way off. At first, I thought that my system
was just lagging - I had a server VM running, Firefox (my main) always has a
ridiculous number of tabs open, and I was playing the game in Chrome because I
don't like logging into Facebook from my 'everyday' browser - but shutting
down the most resource intensive applications did nothing for the game.

Eventually I checked the plugins page and noticed that Chrome's built-in Flash
plugin had re-enabled itself - I disabled it a couple weeks ago due to some
video streaming issues - and it was once again the default plugin for those
applications, therefore overriding the (higher version) system wide install.

I'm really hoping I'm not going to have to babysit Flash every few weeks when
Chrome updates, especially since there isn't always a visual cue that you're
running a new version of Chrome.

~~~
paulhodge
I've also starting having some awful performance hitches involving Flash,
which might be related. Sometimes if I watch a Youtube video, the whole
browser window (not just the current tab) locks up for a few seconds. Just
started happening a few days ago, on Chrome for Mac.

~~~
AgentConundrum
As I said in my last comment, Chrome has its own built-in Flash Player. Even
if you have another player installed on your machine, the built-in one
overrides it unless you specifically disable it.

If you have another Flash player installed, go to chrome://plugins and disable
the one that was installed with Chrome. It's obvious by the 'Location' which
one this is, at least on Windows. I don't have a Mac so I can't help you
there.

It's possible that this is just a problem with Flash 11.3. When I was having
the video issues a few weeks ago, I installed the newer 11.4 version. Chrome's
built-in player still calls itself 11.3. I don't know if it's that Flash
Player version that's having the issue, or Chrome's built-in version
specifically. My only specific complaint was that Chrome 22 re-enabled the
built-in player without my consent.

------
mmccaff
I ran into the z-index issue yesterday with an internal application that uses
Twitter Bootstrap. It had been working perfectly for months, and then became
unusable. After the new Chrome was pushed out, Bootstrap's modal dialogs were
hidden behind the backdrop and therefore inaccessible.

It might have been an edge case related to the layout of this application, but
ultimately I ended up having to patch bootstrap.js to fix it. I felt bad about
editing bootstrap, but should anyone else need a temporary(?) fix, it came
down to this code in bootstrap.js

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')

\- .appendTo(document.body)

\+ .insertAfter(this.$element)

That change had been discussed even before the Chrome changes, here

<https://github.com/twitter/bootstrap/pull/3825>

<https://github.com/twitter/bootstrap/issues/3217>

So, is this a Chrome bug, or a new spec that's being followed?

~~~
jamesr_chromium
If I understand correctly it's the latter. Make sure the z-index is set on the
position:fixed element, not elements inside of it. See
[http://updates.html5rocks.com/2012/09/Stacking-Changes-
Comin...](http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-
position-fixed-elements)

------
cvalleskey
While my server deals with the traffic, here are the important bits:

\- Floats don’t push block content down
(<http://jsfiddle.net/cvalleskey/WD9pB/>)

\- Z-index breaking when element is a child of a fixed parent
(<http://jsfiddle.net/cvalleskey/9S3S8/>)

~~~
jamesr_chromium
For the second issue, please read
[http://updates.html5rocks.com/2012/09/Stacking-Changes-
Comin...](http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-
position-fixed-elements)

------
tylermenezes
Interesting bug that I was just running up against which might be related. I
was trying to draw some text in a small box, but, while it worked in all other
browsers, Chrome 22 was adding what appeared to be extra line height for no
reason. The code looked roughly like:

    
    
        <div><span>TEST</span></div>
        
        div > span {
            line-height: 0;
            margin: 0;
            padding: 0;
            font-size: 12px;
            display: block;
            height: 12px;
        }
    
    

Yet the text was being drawn dramatically outside of the box!

Turns out that this only happens in Chrome 22 when it's inside a list with
list-style-type: disc.

------
gkefalas
Chris, the position: fixed z-index issue is more widespread than you have
there; I'm trying to come up with a case for reliable repro, but I just bumped
into it a bit ago and had to redo some things to work around it. (full
disclosure, I'm one of Chris's coworkers)

------
dentldir
We have a fairly sophisticated HTML5 based Cardiology viewer that completely
fell apart when Chrome 22 shipped. It dynamically creates video objects and
layers canvases on top for measurements. Worked perfect through version 21. In
22, playback is jittery, the browser stops responding, then eventually freezes
where you can't even close the browser window. Other tabs are affected as well
even though the process is supposed to be isolated (i.e. new tabs go
completely black when trying to play video).

The issue isn't fixed in Canary. We are doing our best to isolate it and
provide a bug report that demonstrates the issue outside of the production
environment.

------
javajosh
Not directly related, but there was a comment in the original article that got
me thinking:

 _> To test if your page is going to change, go to Chrome's about:flagsand
turn on/off "fixed position elements create stacking contexts"_

Wouldn't it be cool if webdevs could alter Chrome's rendering settings to
simulate IE and Safari? This would be a huge productivity boon. I think it
might be an interesting challenge for Chrome devs (to expose a reasonable set
of levers) and webdevs (who would probably be responsible for coming up with
collections of levers that work.

~~~
zevyoura
There is this plug-in which is similar:
[https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjp...](https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd)

------
rogerbinns
Something else that broke is if you have your home page set to multiple URLS.
I don't mean what comes up on startup (set to whatever was open last) but
rather what happens when you press the home button which can happen at any
time.

Other browsers do allow multiple URLs to be specified, but Chrome doesn't. The
workaround from time immemorial has been a chunk of Javascript that calls
window.open on a bunch of URLs. In Chrome 22 only the first will open.

------
ezequiel-garzon
Is it me, or the settings button now looks like Android?

~~~
kevingadd
Yeah, Google decided the Wrench icon wasn't meaningless enough so they changed
to something that means even less.

I presume it's for consistency with Android, since right now Chrome for
Android still makes references to 'the wrench icon' in text.

------
mtgx
I have a problem with videos in Chrome lately, too. I think since version 20
or 21. I think it's related to Flash. Whenever I play 2 videos at once in
different tabs, it starts sounding bad, like the hardware can't handle the
video or something, but I have a pretty powerful laptop, and I'm sure it's not
the hardware's fault. It's very weird. It also didn't happen before.

------
latchkey
Thanks for posting this. I just had to redo some CSS on my site because of it.

Even worse is that it also breaks the Garmin Communicator Plugin v 4.0.3. No
more easy uploads to Strava from my Garmin 800 Edge. I don't know if this is
Chrome or Garmin's fault, but the end result is that the end user doesn't have
a working system.

------
AlexMax
Something else I personally noticed with Chrome 22 is that Doxygen's menu bar
now appears to be totally wonky.

<http://i.imgur.com/zHSYQ.png>

It happens with every 'last' menu item. No idea where that came from, but it's
the first time I've noticed a Chrome upgrade in a long while.

~~~
jamesr_chromium
Could you please file a bug at <http://new.crbug.com/> with a link to an
example doxygen-generated page showing the issue? This doesn't look like
something I'm familiar with.

------
aeosynth
I ran into a flexbox bug (which turns out to be by design):

<http://code.google.com/p/chromium/issues/detail?id=152386> `display: -webkit-
flex` disables `overflow: hidden`

Flexbox in general is still experimental; only Chrome 21+ supports the new
spec.

------
TazeTSchnitzel
Oh goodness, the floats thing isn't good. A lot of sites rely on that,
including my own. D:

------
tanepiper
Every issue I've had recently with something breaking has been with Chrome -
we see new issues cropping up almost weekly.

As much as I hate developing for IE, I know the issues at hand and know the
solution to fix it will be stable - with Chrome, not so much.

------
FuzzyDunlop
I appreciate the documentation of this, because it provides a possible reason
to some things suddenly breaking despite no relevant change in code.

In a complex code-base, there can be a lot to blame, but it's nice to have
some plausible explanation.

------
rglover
I've also noticed issues with animations in Chrome 22. Everything is prefixed
properly and works well in other Webkit browsers like Safari. Chrome doesn't
even run the animation, it just flashes and shows up.

Anybody else have this issue?

~~~
appliance
I'm noticing problem with animating items, especially on sites the are using
"parallax" motion.

------
hellopat
Another big issue is a broken javascript profiler. I've been using this quite
a bit to optimize code on a project I've been working on and noticed after I
updated that you can no longer expand nodes. Pretty bummed.

------
egeozcan
I'm also having problems with the spell-checker. It just stopped working with
the "English (United States)" language. When I switch it to Turkish, it works
fine.

------
laserDinosaur
Did anyone else find that all their extensions disappeared?

~~~
alooPotato
As an extension developer - I'd definitely be interested in hearing if others
are experiencing this and if so, how you resolved.

------
ryan_collins
Since the update I've also encountered issues with box-reflect when used in
combination with CSS3 transforms or box-shadows.

~~~
cvalleskey
Nice catch. I'm seeing that too. The reflection appears out of position when
you have a box-shadow on the element.

------
pjmlp
Ah, the wonders of web development portability across browser versions.

It sure beats the pains out of native development.

------
fcoury
Not sure if related, but I am noticing a lot of things broken. One example is
Brazilian Apple Store link for customizing an MacBook Pro Retina doesn't
render in Chrome 22:

<http://store.apple.com/br/configure/MC976BZ/A>?

Whereas renders normally in Firefox and Chrome 21...

------
cooldeal
Can't believe there's no test case in their automated test suite which
would've caught this before being released to tens of millions of users.

Not sure how they test, but they can build a library of typical HTML and CSS
edge cases and generate renderings from both an older version and the new
version, compare the renderings and flag any discrepancies for manual
inspection.

~~~
randallu
The WebKit LayoutTests is huge and almost certainly covers this. Maybe a bad
rebaselining of rendering results, or maybe this is the correct behavior and
other WebKit ports will start exhibiting it...

------
mulya
I'm very glad this is HN front page, my site became actually blocked for all
users because of a tour we had that used a floating overlay, but I still don't
understand, is it a bug? or just following the specs? is there a concensus on
this? if so, should we expect it to be fixed? or copied by other browsers?

------
mulya
So, Is this according to the spec or a bug?

~~~
smsisgay
it might be relegated to

"works as _intended_ "

"feature" territory

akin to permission management issues in code.android
<http://code.google.com/p/android/issues/detail?id=6266>

------
smsisgay
seems like the behavior ought have a toggle in

about:flags

(chrome is forked from chromium)

