search

g200kg / webaudio-pianoroll

Pianoroll GUI library for Web application / relevant to webaudio-controls
Apache License 2.0
94 stars 14 forks source link

kbdimg layout problem on macOS safari #1

Open h-sug1no opened 2 years ago

h-sug1no commented 2 years ago

Hi,

https://g200kg.github.io/webaudio-pianoroll/index2.html

With macOS safari(macOS safari 15.0(16612.1.29.41.4, 16612)), the width of the background-image of the kbdimg is calculated to be narrower as follows:

image

h-sug1no commented 2 years ago

Specifying preserveAspectRatio="none" in the svg data improves the problem in safari and does not seem to cause any side effects in other UAs.

https://gist.githubusercontent.com/h-sug1no/b888b27700375307d3f2c8e0fadb63f3/raw/e45525f2bebaeb885f66a9f33bc1dd7378315bef/kbsrc.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="480" preserveAspectRatio="none">
<path fill="#fff" stroke="#000" d="M0,0 h24v480h-24z"/>
<path fill="#000" d="M0,40 h12v40h-12z M0,120 h12v40h-12z M0,200 h12v40h-12z M0,320 h12v40h-12z M0,400 h12v40h-12z"/>
<path fill="none" stroke="#000" d="M0,60 h24 M0,140 h24 M0,220 h24 M0,280 h24 M0,340 h24 M0,420 h24"/>
</svg>

https://jsfiddle.net/k1hburfd/

image

lysdexic-audio commented 2 years ago

Just noticed this too when testing on safari - the fix from @h-sug1no does work great to fix it