Javascript 阴影在移动时发生的奇怪移动'；s靠近屏幕左侧-CSS/JS/PerspectiveTransform

我曾经数过一个影子：

$("#" + this.id + "_shadow").css({
    "width" : this.w,
    "height" : this.h
});

// create PerspectiveTransfrom
var transform = new PerspectiveTransform(document.getElementById(this.id + "_shadow"), this.w, this.h, true);

// the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight"
transform.topRight.x = (this.w * 1.5);
transform.topLeft.x = (this.w / 1);
transform.topRight.y = (this.h / 1.7);
transform.topLeft.y = (this.h / 1.7);

这是css类。阴影：

.shadow{
    position: absolute;
    filter: contrast(0%) brightness(0%);
    -webkit-filter: contrast(0%) brightness(0%);
    opacity: 0.1;
}

当每一个物体都朝着与玩家相反的方向移动时

Draw(){
    if(shadows === true){
        $("#" + this.id + "_shadow").css({
            "left" : this.x - player.pos_x,
            "top" : this.y - player.pos_y
        });
    }
}

当阴影靠近屏幕左侧时，奇怪的事情发生了

这是对象和阴影的正常外观：

这是靠近屏幕左侧时对象和阴影的外观：

当阴影确实靠近屏幕左侧时：

它被剪掉了，看起来不太好

---

为什么会这样？我如何修复它？

我在Firefox上测试了它，我意识到它没有发生，在Chrome上是。我在Firefox上测试了它，我意识到它没有发生，在Chrome上是的。