Side panel not closing in IOS devices on DOM outside click(Angular 6)

Question

The layout side panel is closing when clicking on DOM except on IOS devices:

@ViewChild('closeContainer') LeftMenuObj;

@HostListener('document:click', ['$event']) clickedOutside($event)
{

    if (this.LeftMenuObj != undefined && this.LeftMenuObj != null 
                 && !this.LeftMenuObj.nativeElement.contains($event.target)) 
    {
        console.log('click outside');
        document.getElementById("LeftMenu").classList.add("hide");
    }
    else if (this.LeftMenuObj != undefined && this.LeftMenuObj != null 
              && this.LeftMenuObj.nativeElement.contains($event.target)) 
    {
        console.log('click inside');
        document.getElementById("LeftMenu").classList.remove("hide");
    }   
}

Answer 1

Because you say it works on all other devices and your code looks OK, I think the origin for the issue is the original elements boundaries. That means, for IOS devices in the queries styles for the element, on which you are looking to detect outside clicks, widths or heights are set larger than on other media queries. Or maybe the padding on the wrapper. To detect, I suggest to put background color like red on the element and blue background color on the parent wrapper. That way you can detect where are the boundaries of your element and if you are really clicking "outside" or still on it. There is also an excellent way to debug and see boundaries by putting this in style.css:

color: red !important;
outline: solid limegreen 1px !important;
background: black !important;