Issue with Custom Element Placement in iOS Devices

[VADDIJASWANT]

Introduction

Hello everyone,

I am currently using JointJS+ for a project where we have created a paper and loaded multiple elements in the graph. We have mobile views in our project and in mobile, we are directly loading the web views. Everything was working fine until recently we observed an issue with a custom element which contains a textarea. This element is not getting properly placed in the paper when we are loading this paper in iOS devices. However, it is working properly in Android devices or Chrome simulated mobile view.

Here is the code for the custom element:

joint.shapes.custom.TextWidget = joint.dia.Element.define('TextWidget', {
    customType: 'TextWidget',
    attrs: {
        body: {
            width: `calc(w)`,
            height: `calc(h)`,
            stroke: `#000`,
            'stroke-opacity':0,
            fill: `transparent`
        },
        foreignObject: {
            width: `calc(w)`,
            height: `calc(h + 2)`,
            //stroke: `#000`,
            x: 0,
            y: 0,
            events: {
                'change textarea': `onChange`,
            },
        },
        textelement: {
            style: {
                color: '#000',
                'font-size': 16,
                'font-family': 'sans-serif',
                background:'transparent',
                height: `calc(100% - 4px)`,
                width: `calc(100% - 4px)`,
                stroke: '#fff',
                'text-align': 'left',
                'min-height': '16px'
            },
        },
        additional_properties: {
            object_type: 'TextWidget',
            textposition: 'right',
            TagName: null,
            TagValue: null,
            TagUnits: null,
            text_align: 'left',
            bold: false,
            italic: false,
            underline: false,
            DisplayFormat: null,
            customTagName: null,
            DefaultDisplayValue: null,
        }
    },
}, {
    markup: [
        {
            tagName: 'rect',
            selector: 'body',
        },
        {
            tagName: 'foreignObject',
            selector: 'foreignObject',
            children: [
                {
                    tagName: 'textarea',
                    namespaceURI: 'http://www.w3.org/1999/xhtml',
                    selector: 'textelement',
                    attributes: {
                        placeholder: 'edit the text widget'
                    },

                }
            ]
        }
    ],
    toJSON: function () {
        // Call the parent toJSON method to get the default serialization
        const json = joint.dia.Element.prototype.toJSON.apply(this, arguments);
        json.markup = this.markup;
        json.attrs = this.get('attrs');
        return json;
    },
});
joint.shapes.TextWidgetView = joint.dia.ElementView.extend({

    events: {
        'change textarea': 'onChange',
        'keyup textarea': 'onChange'
    },
    onChange: function (evt) {
        this.model.attr('textelement/props/value', evt.target.value);
    }
});

I am attaching two photos, one showing the view in an Android device and another one in an iOS device.

ANDROID

###IPHONE

Any suggestions on how to resolve this issue or how to debug this would be greatly appreciated.

Thank you

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Is this happening in Safari browser too?

It could be related to this: https://bugs.webkit.org/show_bug.cgi?id=273173

Does setting position: static | absolute | fixed on <textarea/> have any impact on rendering?

[VADDIJASWANT]

hello @kumilingus,

Following your message, I conducted a check on the Safari browser and did not encounter the issue there. However, after reviewing your JS fiddle regarding the foreign object in the Safari browser, I decided to apply a ‘position: fixed’ style to the textarea elements when I am rendering paper in mobile apps view. this solution is working effectively. I greatly appreciate your assistance. Thank you!