Problem with signature on mobile site

[zaszekk]

I don't know what im doing wrong but i can't repair that, its getting bouncy? I don't have name that behavior and its look like its not resized but i use that https://user-images.githubusercontent.com/79248956/216453467-fc42b124-980f-49c3-befa-892e782d708e.mp4

That was with computer view deselected And three is selected https://user-images.githubusercontent.com/79248956/216453722-05b6a1fc-68b9-4844-97c8-4b4ffe8306b7.mp4

[zaszekk]

and in first video its disappears that's my code :

> <div class="wrapper">

                                    <canvas id="signature-pad" class="signature-pad">
                                        <input id="file_input" type="hidden" name="sign_online">
                                            </canvas>
                                                </div>
                                                    </div>
                                                        <br>
                                                            <button id="clear">
                                                              Wyczyść
                                                                </button>
                                                                    <button type="submit" id ="save-png" class="submit" name="submit"  data-action="save-server">Potwierdź</button>
                                                                        </div>
        </form>                                                             
    </div>
        <script> 
            var canvas = document.getElementById('signature-pad');

            function resizeCanvas(){
                var ratio = Math.max(window.devicePixelRatio || 1,1);

                        canvas.width=canvas.offsetWidth * ratio;
                        canvas.height=canvas.offsetHeight * ratio;
                        canvas.getContext('2d').scale(ratio, ratio);
                }
                window.oneresize = resizeCanvas;
                resizeCanvas();

            var signaturePad= new SignaturePad(canvas,{backgroundColor:'rgb(192,192,192)'});
                document.getElementById('save-png').
                addEventListener('click',function(){
                    if(signaturePad.isEmpty()){
                        return alert("Prosze wprowadź najpierw podpis.");
                    }
                    else{
                        var dataURL=signaturePad.toDataURL();
                    }
                });
                document.getElementById('clear').
                addEventListener('click',function(){
                    signaturePad.clear();
                });```

[zaszekk]

and my css :

canvas {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
  background-color: white;
}
.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[jricca218]

Did you fix this? I can reproduce this issue by adding width:100% to my custom css but when I just leave the width and height attributes as is, it works fine. However, leaving it as is makes it not be responsive and that is what I need

[zaszekk]

I must check that

[UziTech]

closing as stale