for position: fixed and changed stacking contexts, you're likely running into this:<p><a href="http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements" rel="nofollow">http://updates.html5rocks.com/2012/09/Stacking-Changes-Comin...</a><p>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.<p>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).<p>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).
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.<p><a href="http://i.imgur.com/Wjay2.png" rel="nofollow">http://i.imgur.com/Wjay2.png</a><p>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.<p>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.
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.<p><a href="http://code.google.com/p/chromium/issues/detail?id=152304" rel="nofollow">http://code.google.com/p/chromium/issues/detail?id=152304</a>
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.
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: <a href="http://imgur.com/d5xnj" rel="nofollow">http://imgur.com/d5xnj</a> )
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.<p>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.<p>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.<p>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.
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.<p>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<p>this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')<p>- .appendTo(document.body)<p>+ .insertAfter(this.$element)<p>That change had been discussed even before the Chrome changes, here<p><a href="https://github.com/twitter/bootstrap/pull/3825" rel="nofollow">https://github.com/twitter/bootstrap/pull/3825</a><p><a href="https://github.com/twitter/bootstrap/issues/3217" rel="nofollow">https://github.com/twitter/bootstrap/issues/3217</a><p>So, is this a Chrome bug, or a new spec that's being followed?
While my server deals with the traffic, here are the important bits:<p>- Floats don’t push block content down (<a href="http://jsfiddle.net/cvalleskey/WD9pB/" rel="nofollow">http://jsfiddle.net/cvalleskey/WD9pB/</a>)<p>- Z-index breaking when element is a child of a fixed parent (<a href="http://jsfiddle.net/cvalleskey/9S3S8/" rel="nofollow">http://jsfiddle.net/cvalleskey/9S3S8/</a>)
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:<p><pre><code> <div><span>TEST</span></div>
div > span {
line-height: 0;
margin: 0;
padding: 0;
font-size: 12px;
display: block;
height: 12px;
}
</code></pre>
Yet the text was being drawn dramatically outside of the box!<p>Turns out that this only happens in Chrome 22 when it's inside a list with list-style-type: disc.
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)
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).<p>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.
Not directly related, but there was a comment in the original article that got me thinking:<p><i>>To test if your page is going to change, go to Chrome's about:flagsand turn on/off "fixed position elements create stacking contexts"</i><p>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.
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.<p>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.
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.
Thanks for posting this. I just had to redo some CSS on my site because of it.<p>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.
Something else I personally noticed with Chrome 22 is that Doxygen's menu bar now appears to be totally wonky.<p><a href="http://i.imgur.com/zHSYQ.png" rel="nofollow">http://i.imgur.com/zHSYQ.png</a><p>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.
I ran into a flexbox bug (which turns out to be by design):<p><a href="http://code.google.com/p/chromium/issues/detail?id=152386" rel="nofollow">http://code.google.com/p/chromium/issues/detail?id=152386</a>
`display: -webkit-flex` disables `overflow: hidden`<p>Flexbox in general is still experimental; only Chrome 21+ supports the new spec.
Every issue I've had recently with something breaking has been with Chrome - we see new issues cropping up almost weekly.<p>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.
I appreciate the documentation of this, because it provides a possible reason to some things suddenly breaking despite no relevant change in code.<p>In a complex code-base, there can be a lot to blame, but it's nice to have some plausible explanation.
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.<p>Anybody else have this issue?
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.
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.
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:<p><a href="http://store.apple.com/br/configure/MC976BZ/A" rel="nofollow">http://store.apple.com/br/configure/MC976BZ/A</a>?<p>Whereas renders normally in Firefox and Chrome 21...
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.<p>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.
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?