CSS Zoom on Body causes inaccurate selectable

Originally reported on Google Code with ID 2227

Hello,

Tested on the latest 2.1.0 Beta download.

When adding any zoom to the entire body e.g. "<style>body{zoom:0.85;}</style>" the
selection goes off.

For example when making zoom: 0.85; and attempting to select June 18 2014 it selects
June 10 2014 on the month view, similar occurrence on the day and week view.

Note that it occurs when going both above/below 1.00 zoom level.

To replicate you can add "zoom: 0.85;" to the body css tag in the selectable.html demo
that comes with the download.

Thanks!

Reported by prggmr on 2014-08-06 16:55:26

Imported with 1 stars.

[stephentissot]

Hello. I’ve also get this bug with last current version (3.1.0). I think I found a very simple way to make this work :

In FullCalendar.js I update the 2 functions getEvX(ev) and function getEvY(ev) like this :

function getEvX(ev) {
	if (ev.pageX !== undefined) {
	    return ev.pageX / Number($('body').css('zoom'));
	}
	var touches = ev.originalEvent.touches;
	if (touches) {
	    return touches[0].pageX / Number($('body').css('zoom'));
	}
}


function getEvY(ev) {
	if (ev.pageY !== undefined) {
	    return ev.pageY / Number($('body').css('zoom'));
	}
	var touches = ev.originalEvent.touches;
	if (touches) {
	    return touches[0].pageY / Number($('body').css('zoom'));
	}
}

[SuperMario77]

@arshaw

We have the same zoom issue here in a productive app. And this zoom issue is still reproducible in latest version 5.4.0.

You can still reproduce it by following this link: https://fullcalendar.io/reduced-test-cases

• Then select "Fullcalendar v5 Standard CodePen.
• Then add “selectable: true” to the fullCalendar options in “JS” panel
• Then change the page div in “HTML” panel to <div style='zoom: 0.8' id='calendar'></div>

Now, if you try to select a date range with the left mouse button, the selected blue area is way off the mouse pointer position.