safari transform: scale(2) makes the quiz problem

chanind / hanzi-writer

Chinese character stroke order animations and practice quizzes

https://hanziwriter.org

MIT License

3.48k stars 542 forks source link

safari transform: scale(2) makes the quiz problem #172

Open davidwang1988 opened 4 years ago

davidwang1988 commented 4 years ago

chrome is fine, but safari has problem. rendering is ok, the svg will be scaled to 2x, but when write the character, the stoke will not be in the right place. code as below: (safari) '<div id="character-target-1" style: "transform: scale(2)">

' var char1 = HanziWriter.create('character-target-1', '很', { width: 100, height: 100, padding: 5, showCharacter: false }); char1.quiz();

davidwang1988 commented 4 years ago

scale(1) is ok, but <1 or >1 will cause problem

chanind commented 4 years ago

Interesting - maybe safari reports an incorrect mouse position when scaling is applied? Need to do more investigation