JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>Problem with Pixel to Lonlat conversions during pan</title>
        <style type="text/css">
            #map {
                width: 400px;
                height: 400px;
                border: 1px solid gray;
            }
        </style>
        <script type="text/javascript">
            TouchClickHandler = OpenLayers.Class(OpenLayers.Control,
            {
                defaultHandlerOptions: 
                {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },
                
                initialize: function(options)
                {
                    this.handlerOptions = OpenLayers.Util.extend(
                    {}, this.defaultHandlerOptions);
                    
                    OpenLayers.Control.prototype.initialize.apply(this, arguments);
                    
                    this.handler = new OpenLayers.Handler.Click(
                    this,
                    {
                    'click': this.onClick
                    },
                    this.handlerOptions
                    );
                    
                    this.map = options.map;
                },
                
                onClick: function(event)
                {
                    var coord = this.map.getLonLatFromPixel(event.xy);
                    var extent = this.map.getExtent();
                    
                    // console.log("x: " + event.xy.x + " y: " + event.xy.y);
                    //...