Fabric.js: iText zooming in onfocus in iOS

Created on 24 Aug 2017 · 2Comments · Source: fabricjs/fabric.js

There is an issue with iOS zooming in when focusing on the hiddenTextarea while editing an iText object. I have described this more in depth with the fix within the following pull request: https://github.com/kangax/fabric.js/pull/4240

Version

1.7.6

Steps to reproduce

Edit iText layer on iOS device.

Expected Behavior

No zooming into the canvas.

Actual Behavior

The browser zooms directly into the canvas making the entire viewport undecipherable.

Source

dambrogia

Most helpful comment

As this is the first result on googling the issue, I'd like to share how I solved it:

canvas.on('text:editing:entered', function (props) {
      const text = props.target;
      text.hiddenTextarea.style.height = text.fontSize + 'px';
      text.hiddenTextarea.style.width = '0px';
      text.hiddenTextarea.style['caret-color'] = 'transparent';
      text.hiddenTextarea.style['font-size'] = '16px';
});

The caret-color css property should be supported on all major browsers.

zulfajuniadi on 30 Dec 2018

🚀1 🎉1 👍1

All 2 comments

I am closing this issue.

Read about what is happening, why it's happening & how it can be solved here:

https://github.com/kangax/fabric.js/pull/4240#issuecomment-333182396

dambrogia on 29 Sep 2017

As this is the first result on googling the issue, I'd like to share how I solved it:

canvas.on('text:editing:entered', function (props) {
      const text = props.target;
      text.hiddenTextarea.style.height = text.fontSize + 'px';
      text.hiddenTextarea.style.width = '0px';
      text.hiddenTextarea.style['caret-color'] = 'transparent';
      text.hiddenTextarea.style['font-size'] = '16px';
});

The caret-color css property should be supported on all major browsers.

zulfajuniadi on 30 Dec 2018

🚀1 🎉1 👍1

Was this page helpful?

0 / 5 - 0 ratings