15 ms·
Chrome 22 breaks things
- JoelSutherland 14y agoAdditionally, 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 http://code.google.com/p/chromium/issues/detail?id=152304
- artursapek 14y agoI was going to say the same thing. I'm glad I'm not the only one who was bothered by this.
- ward 14y agoWell 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 14y agoIs 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.
- deleted 14y ago[deleted]
- justinph 14y agoIt actaully doesn't have much to do with -webkit-font-antialiasing as a css extension, and much more to do with how chrome is handling font rendering in general. v22 was a big, big step backwards. Designers and typographers are pissed. Even if it's "right" as the chromium devs seem to insist, it doesn't change the fact that fonts look like shit, and don't look like type designers intended them to render.
- gkefalas 14y agoChris, 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)
- TazeTSchnitzel 14y agoOh goodness, the floats thing isn't good. A lot of sites rely on that, including my own. D:
- magicalist 14y agofor position: fixed and changed stacking contexts, you're likely running into this: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements http://updates.html5rocks.com/2012/09/Stacking-Changes-Comin... 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).
- magicalist 14y agofor the float issue, I did find this: http://code.google.com/p/chromium/issues/detail?id=133474 http://code.google.com/p/chromium/issues/detail?id=133474 it may be a dupe of an older bug, but I got tired of looking. It's worth noting that it does not render as stated in Firefox (Mac or Win) or IE9 (in IE9 or compatibility modes). IE9 puts the entire h1 below the floated content. Firefox is partway between IE and Chrome and moves the "This" off to the right side but puts the rest of the h1 below the floated content. Safari is the only browser that renders like the "old" screenshot with floated content and the h1 overlapping (and I would bet this change was made at the webkit level, so webkit nightly and eventually safari will lay out like chrome). I avoid floated content whenever possible, so I can't comment on which browser has the correct rendering. That every browser renders differently doesn't speak well for the state of the float spec, though :) It looks like it's the negative top margin of the element after the floated content that is the root of the disagreement, and that particular case may just be under- or unspecified.
- drhowarddrfine 14y agoWhen testing, never use IE as a reference. You can never trust IE to do ANYTHING right. What IE does, does not matter.
- nthitz 14y agoTalk about an alarmist title of "breaks everything...". Appreciate the HN Mod changing it.
- cvalleskey 14y agoOh, 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.
- deleted 14y ago[deleted]
- egeozcan 14y agoI 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.
- mikeklaas 14y agoI don't. Anonymous title editing by mods (with no note that that's what happened) is probably the worst thing about HN.
- Gigablah 14y agoSeems more facetious than alarmist.
- AgentConundrum 14y agoI 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.
- krelian 14y agoI too saw plugin-container.exe grinding my disk to a halt yesterday. I'm considering going back to FF...
- AgentConundrum 14y agoYour comment is confusing to me. plugin-container.exe is a Firefox process, not chrome.
- paulhodge 14y agoI'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 14y agoAs 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.
- eckyptang 14y agoWithout 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 14y agoEnterprise apps using IE have 1/100 of the design complexity of sites that are affected by these changes.
- eckyptang 14y agoYou'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 14y agoIt'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.
- ZoFreX 14y agoAs someone who worked on an internal NHS website I can affirm this. Rather than use the same CSS and HTML for a form no matter which page it appeared on, the original coders had re-written it from scratch every single time, with slight differences (some intentional, some bugs) between them all. Oh, and the entire site didn't work in IE6, it was developed / tested entirely targeting Firefox, despite the IE6 requirement being in the spec (and it ONLY needing to work with IE6).
- 14y ago
- cooldeal 14y agoCan'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 14y agoThe 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...
- latchkey 14y agoThanks 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.
- ezequiel-garzon 14y agoIs it me, or the settings button now looks like Android?
- kevingadd 14y agoYeah, 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.
- pioul 14y agoReminds me of this post: "What the hell does ≡ do, anyway?" http://ada.mbecker.cc/2012/06/14/goddamn-three-bars-icon/ http://ada.mbecker.cc/2012/06/14/goddamn-three-bars-icon/
- mulya 14y agoI'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?
- mmccaff 14y agoI 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/pull/3825 https://github.com/twitter/bootstrap/issues/3217 https://github.com/twitter/bootstrap/issues/3217 So, is this a Chrome bug, or a new spec that's being followed?
- jamesr_chromium 14y agoIf 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-Coming-to-position-fixed-elements http://updates.html5rocks.com/2012/09/Stacking-Changes-Comin...
- gouggoug 14y agoFunny 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 http://imgur.com/d5xnj )
- FuzzyDunlop 14y agoI 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.
- deleted 14y ago[deleted]
- laserDinosaur 14y agoDid anyone else find that all their extensions disappeared?
- alooPotato 14y agoAs an extension developer - I'd definitely be interested in hearing if others are experiencing this and if so, how you resolved.
- rglover 14y agoI'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 14y agoI'm noticing problem with animating items, especially on sites the are using "parallax" motion.
- mtgx 14y agoI 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.
- dangrossman 14y agoI'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 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.
- ionforce 14y agoSmells like subpixel aliasing?
- calvinlough 14y agoI'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 14y agoI haven't found one. I tried switching color profiles on my display, removing extensions, upgrading to Chrome Canary -- colors are still off.
- gbhn 14y agoThere's new ICC support in Chrome 22. Perhaps that is interacting poorly with some setting in your system?
- dangrossman 14y agoI 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.
- javajosh 14y agoNot 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 14y agoThere is this plug-in which is similar: https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjp...
- jere 14y ago>Chrome 22 Breaks Everything Followed by two things that are broken.
- zabraxias 14y agoDon't forget it also apparently broke his server.
- cvalleskey 14y agoAs 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 14y agoI'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?
- pjmlp 14y agoAh, the wonders of web development portability across browser versions. It sure beats the pains out of native development.
- cvalleskey 14y agoWhile my server deals with the traffic, here are the important bits: - Floats don’t push block content down (http://jsfiddle.net/cvalleskey/WD9pB/ http://jsfiddle.net/cvalleskey/WD9pB/) - Z-index breaking when element is a child of a fixed parent (http://jsfiddle.net/cvalleskey/9S3S8/ http://jsfiddle.net/cvalleskey/9S3S8/)
- femto113 14y agoAdding "clear: left;" to the h1's style seems to yield the expected result, perhaps the problem isn't with the floated items but instead with the blocks? Is there some new rule about the default clear behavior?
- jamesr_chromium 14y agoFor the second issue, please read http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements http://updates.html5rocks.com/2012/09/Stacking-Changes-Comin...
- Groxx 14y agointeresting - that first one looks like it might be a bug. When you inspect it in the debugger, the h1 is entirely within the container, though the text is well outside.
- mulya 14y agoSo, Is this according to the spec or a bug?
- smsisgay 14y agoit 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 http://code.google.com/p/android/issues/detail?id=6266
- AlexMax 14y agoSomething 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 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 14y agoCould you please file a bug at http://new.crbug.com/ 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.
- dentldir 14y agoWe 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.
- tanepiper 14y agoEvery 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.
- smsisgay 14y agoseems like the behavior ought have a toggle in about:flags (chrome is forked from chromium)
- hellopat 14y agoAnother 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.
- aeosynth 14y agoI ran into a flexbox bug (which turns out to be by design): http://code.google.com/p/chromium/issues/detail?id=152386 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.
- fcoury 14y agoNot 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 http://store.apple.com/br/configure/MC976BZ/A? Whereas renders normally in Firefox and Chrome 21...
- rogerbinns 14y agoSomething 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.
- ryan_collins 14y agoSince the update I've also encountered issues with box-reflect when used in combination with CSS3 transforms or box-shadows.
- cvalleskey 14y agoNice catch. I'm seeing that too. The reflection appears out of position when you have a box-shadow on the element.
- tylermenezes 14y agoInteresting 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.
- egeozcan 14y agoI'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.