53186 2011-01-26 12:28:12 -0800 @media queries do not take zooming into account 2013-03-14 16:24:21 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All All RESOLVED FIXED P2 Normal --- 1 arv johnme abarth ac aelias ben ch.martin dcmouyard dkaleta eric.carlson esprehn+autocc feature-media-reviews jer.noble johnme jstritar kenneth koivisto macpherson menard ojan.autocc pipo rbyers simon.fraser tmpsantos webkit.review.bot yonathan oldest_to_newest 340401 0 80223 arv 2011-01-26 12:28:12 -0800 Created attachment 80223 Test case Given a media query like this: @media (max-width: 940px) { ... } the length value does not take zooming into account which leads to wrong layout. 534647 1 ac 2012-01-12 01:28:14 -0800 I've noted this to, writing it up here: http://alastairc.ac/2012/01/zooming-bug-in-webkit/ When zooming on a site using media queries (e.g. bostonglobe.com) does not behave as expected, as the media queries do not trigger. The simple test case I used to compare is here: http://alastairc.ac/testing/media-query-width.html I suspect it overlaps with these bugs as well though: #61970 and #41063 I would also add that this is an accessibility issue, as people with mild to moderate visual impairments will be more negatively affected by this. 587773 2 dcmouyard 2012-03-26 08:31:34 -0700 I think there needs to be two separate zoom events. The traditional page zoom event should trigger media queries. The pinch-zoom event on touch devices, however, shouldn't trigger media queries. 608116 3 yonathan 2012-04-23 15:45:37 -0700 This is also filed with Chromium at http://code.google.com/p/chromium/issues/detail?id=86155 You can use this jsfiddle to compare the viewport width according to media query against CSS pixels (they should be equal). http://fiddle.jshell.net/yonran/FnkCE/show/light/ 834974 4 pipo 2013-02-17 03:14:05 -0800 Please fix this bug. This bugs prevents developers to use proportional media queries, which would be a great enhancement for responsive web designs. For proportional media queries see: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/. The bug can be tested on this site, too. The problem occurs in Chrome 24.0.1312.57 and Safari 6.0.2 (8536.26.17). (Firefox works fine.) 851229 5 192234 johnme 2013-03-08 08:59:12 -0800 Created attachment 192234 Patch 851240 6 192234 kenneth 2013-03-08 09:14:01 -0800 Comment on attachment 192234 Patch View in context: https://bugs.webkit.org/attachment.cgi?id=192234&action=review > Source/WebCore/ChangeLog:11 > + Fixes @media width and height to take into account full page zoom, by > + adding code to MediaQueryEvaluator's width/heightMediaFeatureEval, > + corresponding to the existing code in Element::clientWidth which makes > + document.documentElement.clientWidth take into account page zoom. OK, so this is only full page zoom, and thus not scaling (pinch zoom). 851244 7 192234 peter 2013-03-08 09:16:11 -0800 Comment on attachment 192234 Patch I think that's what the comment says? :-). 851247 8 192234 webkit.review.bot 2013-03-08 09:22:09 -0800 Comment on attachment 192234 Patch Clearing flags on attachment: 192234 Committed r145233: <http://trac.webkit.org/changeset/145233> 851248 9 webkit.review.bot 2013-03-08 09:22:13 -0800 All reviewed patches have been landed. Closing bug. 851256 10 simon.fraser 2013-03-08 09:39:16 -0800 Yeah, I wish this had clarified that it doesn't affect pageScale-zooming. 855546 11 ben 2013-03-14 16:24:21 -0700 Sorry to pollute the thread but just wanted to say massive kudos to John for addressing this. This bug has been driving responsive design geeks batty for ages :) 80223 2011-01-26 12:28:12 -0800 2011-01-26 12:28:12 -0800 Test case webkit-media-size.html text/html 615 arv PGh0bWw+CjxzdHlsZT4KI3NtYWxsIHsgZGlzcGxheTogbm9uZTsgfQojbGFyZ2UgeyBkaXNwbGF5 OiBibG9jazsgfQoKQG1lZGlhIChtYXgtd2lkdGg6IDk0MHB4KSB7CiAgI3NtYWxsIHsgZGlzcGxh eTogYmxvY2s7IH0KICAjbGFyZ2UgeyBkaXNwbGF5OiBub25lOyB9Cn0KPC9zdHlsZT4KPHNjcmlw dD4KCmZ1bmN0aW9uIGhhbmRsZVJlc2l6ZSgpIHsKICB2YXIgd2lkdGhFbGVtZW50ID0gZG9jdW1l bnQuZ2V0RWxlbWVudEJ5SWQoJ3dpbmRvdy13aWR0aCcpOwogIHdpZHRoRWxlbWVudC5pbm5lckhU TUwgPSAnV2luZG93IHdpZHRoOiAnICsgd2luZG93LmlubmVyV2lkdGggKyAncHgnOwp9Cgp3aW5k b3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgaGFuZGxlUmVzaXplKTsKCndpbmRvdy5vbmxv YWQgPSBoYW5kbGVSZXNpemU7Cgo8L3NjcmlwdD4KCjxib2R5PgoKPHAgaWQ9InNtYWxsIj5zbWFs bCBsYXlvdXQ8L3A+CjxwIGlkPSJsYXJnZSI+bGFyZ2UgbGF5b3V0PC9wPgoKPHA+V2hlbiB3aW5k b3cuaW5uZXJXaWR0aCBpcyA+OTQwcHgsIHlvdSBzaG91bGQgc2VlIGxhcmdlIGxheW91dC48L3A+ Cgo8cCBpZD0id2luZG93LXdpZHRoIj48L3A+Cgo8L2JvZHk+CjwvaHRtbD4K 192234 2013-03-08 08:59:12 -0800 2013-03-08 09:22:08 -0800 Patch bug-53186-20130308165514.patch text/plain 5080 johnme U3VidmVyc2lvbiBSZXZpc2lvbjogMTQ1MTk0CmRpZmYgLS1naXQgYS9Tb3VyY2UvV2ViQ29yZS9D aGFuZ2VMb2cgYi9Tb3VyY2UvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXggMzcxNjBkZTU1ZDRjYzkz ZGJlNDJjM2E2YjRiODRkYWZlODE1N2I4Zi4uMjZmMTg3MGFkYjcxMjAwODM4MjJmZTAwMDM2ZWNj ZjYzZjhhMTc2YSAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nCisrKyBiL1Nv dXJjZS9XZWJDb3JlL0NoYW5nZUxvZwpAQCAtMSwzICsxLDIxIEBACisyMDEzLTAzLTA4ICBKb2hu IE1lbGxvciAgPGpvaG5tZUBjaHJvbWl1bS5vcmc+CisKKyAgICAgICAgQG1lZGlhIHF1ZXJpZXMg ZG8gbm90IHRha2Ugem9vbWluZyBpbnRvIGFjY291bnQKKyAgICAgICAgaHR0cHM6Ly9idWdzLndl YmtpdC5vcmcvc2hvd19idWcuY2dpP2lkPTUzMTg2CisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9C T0RZIChPT1BTISkuCisKKyAgICAgICAgRml4ZXMgQG1lZGlhIHdpZHRoIGFuZCBoZWlnaHQgdG8g dGFrZSBpbnRvIGFjY291bnQgZnVsbCBwYWdlIHpvb20sIGJ5CisgICAgICAgIGFkZGluZyBjb2Rl IHRvIE1lZGlhUXVlcnlFdmFsdWF0b3IncyB3aWR0aC9oZWlnaHRNZWRpYUZlYXR1cmVFdmFsLAor ICAgICAgICBjb3JyZXNwb25kaW5nIHRvIHRoZSBleGlzdGluZyBjb2RlIGluIEVsZW1lbnQ6OmNs aWVudFdpZHRoIHdoaWNoIG1ha2VzCisgICAgICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5j bGllbnRXaWR0aCB0YWtlIGludG8gYWNjb3VudCBwYWdlIHpvb20uCisKKyAgICAgICAgVGVzdDog ZmFzdC9tZWRpYS9tcS13aWR0aC1wYWdlem9vbS5odG1sCisKKyAgICAgICAgKiBjc3MvTWVkaWFR dWVyeUV2YWx1YXRvci5jcHA6CisgICAgICAgIChXZWJDb3JlOjpoZWlnaHRNZWRpYUZlYXR1cmVF dmFsKToKKyAgICAgICAgKFdlYkNvcmU6OndpZHRoTWVkaWFGZWF0dXJlRXZhbCk6CisKIDIwMTMt MDMtMDggIEFsYmVydG8gR2FyY2lhICA8YWdhcmNpYUBpZ2FsaWEuY29tPgogCiAgICAgICAgIFtC bGFja0JlcnJ5XSBMYXllclRpbGVyOiByZW5hbWUgY3VycmVudEZyYW1lSGFzQWxwaGEgYXMgY3Vy cmVudEZyYW1lS25vd25Ub0JlT3BhcXVlCmRpZmYgLS1naXQgYS9Tb3VyY2UvV2ViQ29yZS9jc3Mv TWVkaWFRdWVyeUV2YWx1YXRvci5jcHAgYi9Tb3VyY2UvV2ViQ29yZS9jc3MvTWVkaWFRdWVyeUV2 YWx1YXRvci5jcHAKaW5kZXggMmNmNjk5OTBkNWQ3MzE3OTJkNzQ0NTc4YzYxYzMyZjRlMzk4MGE4 NC4uYjZhZTYyMzgzZTIzZGUzMjNkMGYwYTBiODg0ZjYzYmE2NmYwOWNmNiAxMDA2NDQKLS0tIGEv U291cmNlL1dlYkNvcmUvY3NzL01lZGlhUXVlcnlFdmFsdWF0b3IuY3BwCisrKyBiL1NvdXJjZS9X ZWJDb3JlL2Nzcy9NZWRpYVF1ZXJ5RXZhbHVhdG9yLmNwcApAQCAtNDc4LDkgKzQ3OCwxMiBAQCBz dGF0aWMgYm9vbCBoZWlnaHRNZWRpYUZlYXR1cmVFdmFsKENTU1ZhbHVlKiB2YWx1ZSwgUmVuZGVy U3R5bGUqIHN0eWxlLCBGcmFtZSogZgogICAgIEZyYW1lVmlldyogdmlldyA9IGZyYW1lLT52aWV3 KCk7CiAKICAgICBpZiAodmFsdWUpIHsKKyAgICAgICAgaW50IGhlaWdodCA9IHZpZXctPmxheW91 dEhlaWdodCgpOworICAgICAgICBpZiAoUmVuZGVyVmlldyogcmVuZGVyVmlldyA9IGZyYW1lLT5k b2N1bWVudCgpLT5yZW5kZXJWaWV3KCkpCisgICAgICAgICAgICBoZWlnaHQgPSBhZGp1c3RGb3JB YnNvbHV0ZVpvb20oaGVpZ2h0LCByZW5kZXJWaWV3KTsKICAgICAgICAgUmVuZGVyU3R5bGUqIHJv b3RTdHlsZSA9IGZyYW1lLT5kb2N1bWVudCgpLT5kb2N1bWVudEVsZW1lbnQoKS0+cmVuZGVyU3R5 bGUoKTsKICAgICAgICAgaW50IGxlbmd0aDsKLSAgICAgICAgcmV0dXJuIGNvbXB1dGVMZW5ndGgo dmFsdWUsICFmcmFtZS0+ZG9jdW1lbnQoKS0+aW5RdWlya3NNb2RlKCksIHN0eWxlLCByb290U3R5 bGUsIGxlbmd0aCkgJiYgY29tcGFyZVZhbHVlKHZpZXctPmxheW91dEhlaWdodCgpLCBsZW5ndGgs IG9wKTsKKyAgICAgICAgcmV0dXJuIGNvbXB1dGVMZW5ndGgodmFsdWUsICFmcmFtZS0+ZG9jdW1l bnQoKS0+aW5RdWlya3NNb2RlKCksIHN0eWxlLCByb290U3R5bGUsIGxlbmd0aCkgJiYgY29tcGFy ZVZhbHVlKGhlaWdodCwgbGVuZ3RoLCBvcCk7CiAgICAgfQogCiAgICAgcmV0dXJuIHZpZXctPmxh eW91dEhlaWdodCgpICE9IDA7CkBAIC00OTEsOSArNDk0LDEyIEBAIHN0YXRpYyBib29sIHdpZHRo TWVkaWFGZWF0dXJlRXZhbChDU1NWYWx1ZSogdmFsdWUsIFJlbmRlclN0eWxlKiBzdHlsZSwgRnJh bWUqIGZyCiAgICAgRnJhbWVWaWV3KiB2aWV3ID0gZnJhbWUtPnZpZXcoKTsKIAogICAgIGlmICh2 YWx1ZSkgeworICAgICAgICBpbnQgd2lkdGggPSB2aWV3LT5sYXlvdXRXaWR0aCgpOworICAgICAg ICBpZiAoUmVuZGVyVmlldyogcmVuZGVyVmlldyA9IGZyYW1lLT5kb2N1bWVudCgpLT5yZW5kZXJW aWV3KCkpCisgICAgICAgICAgICB3aWR0aCA9IGFkanVzdEZvckFic29sdXRlWm9vbSh3aWR0aCwg cmVuZGVyVmlldyk7CiAgICAgICAgIFJlbmRlclN0eWxlKiByb290U3R5bGUgPSBmcmFtZS0+ZG9j dW1lbnQoKS0+ZG9jdW1lbnRFbGVtZW50KCktPnJlbmRlclN0eWxlKCk7CiAgICAgICAgIGludCBs ZW5ndGg7Ci0gICAgICAgIHJldHVybiBjb21wdXRlTGVuZ3RoKHZhbHVlLCAhZnJhbWUtPmRvY3Vt ZW50KCktPmluUXVpcmtzTW9kZSgpLCBzdHlsZSwgcm9vdFN0eWxlLCBsZW5ndGgpICYmIGNvbXBh cmVWYWx1ZSh2aWV3LT5sYXlvdXRXaWR0aCgpLCBsZW5ndGgsIG9wKTsKKyAgICAgICAgcmV0dXJu IGNvbXB1dGVMZW5ndGgodmFsdWUsICFmcmFtZS0+ZG9jdW1lbnQoKS0+aW5RdWlya3NNb2RlKCks IHN0eWxlLCByb290U3R5bGUsIGxlbmd0aCkgJiYgY29tcGFyZVZhbHVlKHdpZHRoLCBsZW5ndGgs IG9wKTsKICAgICB9CiAKICAgICByZXR1cm4gdmlldy0+bGF5b3V0V2lkdGgoKSAhPSAwOwpkaWZm IC0tZ2l0IGEvTGF5b3V0VGVzdHMvQ2hhbmdlTG9nIGIvTGF5b3V0VGVzdHMvQ2hhbmdlTG9nCmlu ZGV4IDY1MGE0MjEwNDlmODhiMjkxOWZmZGFiMWE1NDFlNWY0ODAxZjZhOWMuLjZjZjY3YTA3NWJm NTYzMzUwODJjMDZjNjU1ZmFlYjVjN2Q5NWI4MTIgMTAwNjQ0Ci0tLSBhL0xheW91dFRlc3RzL0No YW5nZUxvZworKysgYi9MYXlvdXRUZXN0cy9DaGFuZ2VMb2cKQEAgLTEsMyArMSwxMyBAQAorMjAx My0wMy0wOCAgSm9obiBNZWxsb3IgIDxqb2hubWVAY2hyb21pdW0ub3JnPgorCisgICAgICAgIEBt ZWRpYSBxdWVyaWVzIGRvIG5vdCB0YWtlIHpvb21pbmcgaW50byBhY2NvdW50CisgICAgICAgIGh0 dHBzOi8vYnVncy53ZWJraXQub3JnL3Nob3dfYnVnLmNnaT9pZD01MzE4NgorCisgICAgICAgIFJl dmlld2VkIGJ5IE5PQk9EWSAoT09QUyEpLgorCisgICAgICAgICogZmFzdC9tZWRpYS9tcS13aWR0 aC1wYWdlem9vbS1leHBlY3RlZC5odG1sOiBBZGRlZC4KKyAgICAgICAgKiBmYXN0L21lZGlhL21x LXdpZHRoLXBhZ2V6b29tLmh0bWw6IEFkZGVkLgorCiAyMDEzLTAzLTA4ICBab2x0YW4gQXJ2YWkg IDx6YXJ2YWlAaW5mLnUtc3plZ2VkLmh1PgogCiAgICAgICAgIFtRdF0gVW5yZXZpZXdlZCBnYXJk ZW5pbmcuCmRpZmYgLS1naXQgYS9MYXlvdXRUZXN0cy9mYXN0L21lZGlhL21xLXdpZHRoLXBhZ2V6 b29tLWV4cGVjdGVkLmh0bWwgYi9MYXlvdXRUZXN0cy9mYXN0L21lZGlhL21xLXdpZHRoLXBhZ2V6 b29tLWV4cGVjdGVkLmh0bWwKbmV3IGZpbGUgbW9kZSAxMDA2NDQKaW5kZXggMDAwMDAwMDAwMDAw MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMC4uMWM0OWNkNmEwYWU2MDRhMTE0OWUzNmMxMjI0 ZDNlMjAzM2E0YjY4ZgotLS0gL2Rldi9udWxsCisrKyBiL0xheW91dFRlc3RzL2Zhc3QvbWVkaWEv bXEtd2lkdGgtcGFnZXpvb20tZXhwZWN0ZWQuaHRtbApAQCAtMCwwICsxLDE1IEBACis8IURPQ1RZ UEUgaHRtbD4KKzxzY3JpcHQ+CisgICAgZXZlbnRTZW5kZXIuem9vbVBhZ2VJbigpOworICAgIGV2 ZW50U2VuZGVyLnpvb21QYWdlSW4oKTsKKzwvc2NyaXB0PgorPHN0eWxlPgorICAgIGJvZHkgewor ICAgICAgICBiYWNrZ3JvdW5kOiBncmVlbjsKKyAgICB9Cis8L3N0eWxlPgorPHA+CisgICAgVGhp cyBwYWdlIHNob3VsZCBoYXZlIDE0NCUgZnVsbCBwYWdlIHpvb20sIGhlbmNlIHRoZSB2aWV3cG9y dCB3aWR0aCBzaG91bGQKKyAgICBiZSA4MDAgLyAxLjQ0ID0gNTU1LjZweCwgd2hpY2ggaXMgbGVz cyB0aGFuIDcwMCBzbyB0aGUgYmFja2dyb3VuZCBzaG91bGQKKyAgICBnbyBncmVlbi4KKzwvcD4g ClwgTm8gbmV3bGluZSBhdCBlbmQgb2YgZmlsZQpkaWZmIC0tZ2l0IGEvTGF5b3V0VGVzdHMvZmFz dC9tZWRpYS9tcS13aWR0aC1wYWdlem9vbS5odG1sIGIvTGF5b3V0VGVzdHMvZmFzdC9tZWRpYS9t cS13aWR0aC1wYWdlem9vbS5odG1sCm5ldyBmaWxlIG1vZGUgMTAwNjQ0CmluZGV4IDAwMDAwMDAw MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAuLmU4MTczODhiZTQxZTc4YzBkOTZjNWNh NjM3ZDBmODY3ZWIxZWZlMjMKLS0tIC9kZXYvbnVsbAorKysgYi9MYXlvdXRUZXN0cy9mYXN0L21l ZGlhL21xLXdpZHRoLXBhZ2V6b29tLmh0bWwKQEAgLTAsMCArMSwyMCBAQAorPCFET0NUWVBFIGh0 bWw+Cis8c2NyaXB0PgorICAgIGV2ZW50U2VuZGVyLnpvb21QYWdlSW4oKTsKKyAgICBldmVudFNl bmRlci56b29tUGFnZUluKCk7Cis8L3NjcmlwdD4KKzxzdHlsZT4KKyAgICBib2R5IHsKKyAgICAg ICAgYmFja2dyb3VuZDogcmVkOworICAgIH0KKyAgICBAbWVkaWEgKG1heC13aWR0aDogNzAwcHgp IHsKKyAgICAgICAgYm9keSB7CisgICAgICAgICAgICBiYWNrZ3JvdW5kOiBncmVlbjsKKyAgICAg ICAgfQorICAgIH0KKzwvc3R5bGU+Cis8cD4KKyAgICBUaGlzIHBhZ2Ugc2hvdWxkIGhhdmUgMTQ0 JSBmdWxsIHBhZ2Ugem9vbSwgaGVuY2UgdGhlIHZpZXdwb3J0IHdpZHRoIHNob3VsZAorICAgIGJl IDgwMCAvIDEuNDQgPSA1NTUuNnB4LCB3aGljaCBpcyBsZXNzIHRoYW4gNzAwIHNvIHRoZSBiYWNr Z3JvdW5kIHNob3VsZAorICAgIGdvIGdyZWVuLgorPC9wPiAKXCBObyBuZXdsaW5lIGF0IGVuZCBv ZiBmaWxlCg==