UNCONFIRMED69421
Client side image maps break with css image resize (in all browsers?) 
https://bugs.webkit.org/show_bug.cgi?id=69421
Summary Client side image maps break with css image resize (in all browsers?)
Egil Möller
Reported 2011-10-05 07:19:13 PDT
Created attachment 109787 [details] Test html file exhibiting the problem Client side image maps breaks in conjunction with css based image scaling (max-width, max-height, width and height)). When setting the width/height of an image using css, the client side image map coordinates are not rescaled, and the map breaks. This is breakage is not limited to webkit, but also exists in at least Firefox and possibly all major browsers.
Attachments
Test html file exhibiting the problem (5.73 KB, text/html)
2011-10-05 07:19 PDT, Egil Möller 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2011-10-05 23:05:08 PDT
Could you please provide more detailed steps to reproduce? I'm not seeing any difference between Safari 5.1 and Firefox 7.0.1 on this test when I look at where on the larger map cursor changes to hand.
Egil Möller
Comment 2 2011-10-06 00:34:01 PDT
I'm sorry if I was unspecifix. The problem is not a different behavior from Safari or Firefox, in fact, at least Firefox has the same problem. If you examine where the pointer changes to a hand when moved over the small picture, you'll see that all of Norway (the country depicted) is a link, while all space outside of the country is not. In the big picture however, the clickable/linked shape is still the same, up in the left hand corner, while the image has been scaled. That is, in the big image, norway isn't clickable any longer, while a part of the north sea (northwest of norway) is. The problem is that scaling an image using CSS does not scale the coordinates of the imagemap clickable areas in the same way. I do not know if the CSS standard actually says anything on this topic, but if this functionality is "by design", I believe it is a very bad misfeature.
Egil Möller
Comment 3 2011-10-06 00:35:57 PDT
Oh, and if this wasn't clear: both images actually have the same src=, and uses the same imagemap. The only difference is CSS styling. I have tried to make a minimal example (save for the set of coordinates in the image map), so please take a look at the html source.
Alexey Proskuryakov
Comment 4 2011-10-06 09:19:40 PDT
Sorry, I overlooked "not" in "not limited to webkit".
Alexey Proskuryakov
Comment 5 2011-11-28 15:25:57 PST
Duplicate of bug 33379?
Alexey Proskuryakov
Comment 6 2012-07-07 01:15:12 PDT
Or even bug 22788?
Note You need to log in before you can comment on or make changes to this bug.