143479 2015-04-07 05:42:33 -0700 REGRESSION: Wrong layout in http://www.heroquestclassic.com/heroes-fe-de-erratas-y-un-breve-descanso/ 2015-04-24 13:47:58 -0700 1 1 1 Unclassified WebKit Evangelism 528+ (Nightly build) Unspecified Unspecified RESOLVED INVALID InRadar, Regression P2 Normal --- 1 agomez webkit-unassigned ap benjamin cgarcia darin koivisto rniwa sam simon.fraser timothy webkit-bug-importer yoon oldest_to_newest 1083295 0 agomez 2015-04-07 05:42:33 -0700 WebKitGtk 2.8.0 Open http://www.heroquestclassic.com/heroes-fe-de-erratas-y-un-breve-descanso/ in MiniBrowser The layout is completely wrong, with all the content in a narrow column at the left of the page. This is also reproducible with Epiphany 3.16.0 running also WebKitGtk 2.8.0 1083901 1 cgarcia 2015-04-09 00:16:24 -0700 It works with WebKitGTK+ 2.6.x, but fails with trunk/2.8. The problem is also reproducible in mac, so this looks like a recent regression in WebCore. 1084207 2 darin 2015-04-09 22:47:07 -0700 Next step would be to reduce this to make a much smaller test case showing the problem. 1084222 3 cgarcia 2015-04-10 00:19:58 -0700 Knowing the revision that introduced the regression would also help. I started to bisect yesterday, but all the build breaks made it impossible to do a bisect using the GTK+ port :-( 1084225 4 yoon 2015-04-10 00:22:45 -0700 In Safari Version 8.0.5 (10600.5.17), it seems okay, but I don't know which revision it uses. 1084226 5 darin 2015-04-10 00:27:32 -0700 Note that we need the reduction anyway to help us make a regression test, even if we don't figure out exactly what version this regressed in. 1084227 6 yoon 2015-04-10 00:40:05 -0700 (In reply to comment #5) > Note that we need the reduction anyway to help us make a regression test, > even if we don't figure out exactly what version this regressed in. I agree to make a regression test for this bug. If there is nobody have a time to do it, I'll do it. 1084607 7 webkit-bug-importer 2015-04-11 21:45:29 -0700 <rdar://problem/20511704> 1084613 8 250595 darin 2015-04-11 22:27:22 -0700 Created attachment 250595 reduced test case It’s a CSS rule problem. I attached a simple test case. 1084614 9 darin 2015-04-11 22:29:47 -0700 Maybe r182321? The new Bloom filter? 1084615 10 darin 2015-04-11 22:35:49 -0700 Or some earlier change to the CSS rule system. 1084653 11 darin 2015-04-12 09:54:37 -0700 Looks like this isn’t a bug at all. The website was depending on a bug in an older version of WebKit. The :not expression should match almost everything, and it does. 1084654 12 darin 2015-04-12 09:57:47 -0700 The style sheet named pb-view.css has these rules in it: .template-wrapper .span3, :not(.portfolio-grid li.span3) { width: 22.75%; } .template-wrapper .span12 .span3, :not(.portfolio-grid li.span3) { width: 21.25%; } Those rules are going to apply to practically every element on the page, and are going to set their width to about a fifth of what the should be. Older versions of WebKit without proper :not support would incorrectly ignore these rules. I believe the error here was using a comma rather than using a space. I believe the :not is supposed to be a descendant selector. I suggest we not change WebKit and instead get the website to fix their broken style sheet. 1084655 13 darin 2015-04-12 09:58:59 -0700 I’d like to understand why this problem doesn’t happen with non-WebKit web browsers. 1084656 14 darin 2015-04-12 09:59:58 -0700 Note that I say these rules set the widths of elements to about a fifth what they should be. But this happens over and over again, since these rules apply to almost every element on the page, so they apply to the body element, and each div element, and the img element, and so on. So the widths get smaller and smaller (1/5 of 1/5 of 1/5). 1084672 15 benjamin 2015-04-12 12:41:04 -0700 (In reply to comment #13) > I’d like to understand why this problem doesn’t happen with non-WebKit web > browsers. It is because of our support for CSS 4. The other browsers only support CSS Selectors Level 3. In Level 3, it was only valid to use a simple selector inside :not(). In WebKit, we support almost full selector lists (:visited and :link do not match). The rule ":not(.portfolio-grid li.span3)" would be invalid for older browsers. For us it is equivalent to ":not(.portfolio-grid >> li.span3)" and is completely valid. 1084681 16 darin 2015-04-12 13:06:45 -0700 So this was skipped in older browsers because it was not valid. But in recent WebKit it matches everything. I think this is going to have to be fixed by the website owners. Unless we find this kind of mistake is common and we have to come up with some kind of compatibility quirk. 1086262 17 koivisto 2015-04-17 01:05:55 -0700 Another way to think about this is that CSS 4 :not may not be web compatible as specified. 1088204 18 agomez 2015-04-24 01:47:20 -0700 Thanks guys! I will report back to the website. 1088251 19 timothy 2015-04-24 10:43:02 -0700 Jon Davis reached out to the site owner on 4/16. The issue comes from a WordPress plugin called Aqua Page Builder. Jon contacted the plugin author on 4/20, who has mentioned he is no longer actively developing the plugin, but said he was open to recommendations. We sent over the recommended changes and waiting to hear back on whether he will implement them or not. 1088309 20 benjamin 2015-04-24 13:46:55 -0700 Can someone try a pull request? https://github.com/syamilmj/Aqua-Page-Builder/pulls 1088310 21 agomez 2015-04-24 13:47:58 -0700 Oh, great! Well, I sent a comment back to the site but it seems you have already done much more work on that direction. Thanks a lot! 250595 2015-04-11 22:27:22 -0700 2015-04-11 22:27:22 -0700 reduced test case heroquest-reduction.html text/html 100 darin PHN0eWxlPgoueCwgOm5vdCgueSBsaSkgeyBkaXNwbGF5OiBub25lOyB9Cjwvc3R5bGU+CjxkaXY+ WW91IHNob3VsZCBiZSBhYmxlIHRvIHNlZSB0aGlzIHRleHQuPC9kaXY+Cg==