4

The problem I have is that in MS edge, my imagemap functionality's only work partially. It is powered by the knockout FW. On bigger imagemaps, it doesn't registers the entire imagemap into the viewmodel. As a result all the hover effects and the on-click styling for the imagemap stops working.

However this is only issue with big imagemaps, also noteworthy is that the part that is registered does have the on-click function triggered (just not the styling).

The most remarkable problem with this is that i can't debug it, if i enter the debug console and refresh the page, it does work.

this is the image map code rendered with Razor:

<div id="seatplan" data-bind="visible:maximumReached">
    <img id="mapSeatPlan" src="@Url.Action("MyImage", "Show", new { uid = Model.Show.RowGuid })" alt="seatplan" usemap="#plan_met" />
    <map name="plan_met" id="plan_met">
        @foreach (var seat in seats)
        {
            <area shape="rect" href="#" data-seat="@seat.RowGuid" coords="@seat.CoordX,@seat.CoordY,@(seat.CoordX + seat.CoordWidth),@(seat.CoordY + seat.CoordHeight)" alt="@seat.RowName @seat.DisplayName" />
        }
    </map></div>

and this is the JS that registers the area's in an array:

    function buildAreas() {
        var items = $('#plan_met').find('area');
        var areaArray = [];

        items.each(function () {
            var areaName = $(this).attr('data-seat');
            var fullName = $(this).attr('alt');
            var newarea = {
                key: areaName,
                toolTip: buildToolTipArea(areaName, fullName)
            };

            if (isSelected(areaName)) newarea.selected = true;
            areaArray.push(newarea);
        });
        return areaArray;
    }

The code does work as intented on every browser but Edge, and does work in Edge as intented if the dev tools are open. Is there some limit on something that could break JS in the Chakra engine that gets unlocked with the dev tools? If yes, how can I get this working?

update : https://bitbucket.org/dampeebvba/issue-1303/src I have reproduced the issue without knockout, i had to use Jquery because of the imagemapper plugin. I'd like to emphasize again that it works in every browser including internet explorer, and does work in edge but only if u refresh the page with dev tools open. And also that the on-click in edge will work untill somewhere in the 140's.

Boran Eksen
  • 41
  • 2
  • 3
    Oh my, a true Heisenbug. Nasty. - To be able to help you we'll need to reproduce the issue though. Any chance you could create a client-side only [mcve]? That way we can exclude Razor from the list of possible causes. I'd do the same for KnockoutJS: try to leave it out of the repro if possible. Finally, try the same for jQuery: there's only a small bit of it in your code, easily replaced by plain JS when only testing in a modern browser. – Jeroen Jun 03 '16 at 06:16
  • 1
    I'm an engineer from the Microsoft Edge team, and would be happy to help investigate this further, if you can provide a reduction per Jeroen's advice. – Sampson Jun 03 '16 at 07:03
  • I'm a collegue of Boran and wondering why this works in all browsers but edge. This is a live url example: https://tickets.roodfluweel.be/echt-antwaarps-teater/Show/SeatSelection/81377491-74c9-417b-9a93-862d0c663f69 ... Currently seat 257 is clickable. Seat 259 and upwards is not. – dampee Jun 03 '16 at 08:12
  • uploaded a reproduced minimal version of the problem. https://bitbucket.org/dampeebvba/issue-1303/src – Boran Eksen Jun 03 '16 at 09:56
  • 1
    It was a bug with edge and seems to be fixed in a recent update – Boran Eksen Jul 29 '16 at 09:32

0 Answers0