Prevent Chrome browser from converting position property to inset

Question

I have been battling with this issue for days now and I'm not sure why chrome browser converts CSS position properties (Top, Right, Bottom, Left) to inset property (which is not generally supported by most browsers).

I worked on an editor in which when you edit your element in chrome it converts the CSS position properties to inset like below

But when you view element created on chrome with the inset property on other browsers. The inset property is either removed or strikeout with the warning Unsupported Property Name (See below image)

But if I use browsers like Brave or Safari to build my page using the editor, the CSS position properties remain Top, Right, Bottom, Left. (see below image)

My question is how can I work around this since a wide number of people including me uses chrome and the inset property only works on chrome and android devices, iOS not supported.

Any help in the right direction will be really appreciated.

UPDATE 1
Below is my code, which works exactly like this on Brave, Safari but chrome converts to inset.

UPDATE 2
The editor Saves the HTML and the HTML is used across all browsers. When the page is edited using chrome and the CSS position property is updated to Inset ... Inset is then used across all browsers (and it's not supported by those browsers (safari and brave) ) ... but if I edit my page from Brave browser or safari and save the editor, top, right, bottom, left CSS position property is used and the page renders as expected on all browser

MY SOLUTION
Below is how I solve the issue in jQuery. For AngularJS, please see answer by @user10245459. My Solution assumes you have access to the entire HTML because in my case whenever I save the editor, the HTML is for the page is available to me, so I created a function to look through the HTML code and update the inset style before putting the HTML code in a file

/**
 * A Very stressful/Painful hack for chrome converting Positing
 * Properties to inset, causing text and heading to stack over each other
 * in a corner on iOS mobile, IE/EDGE, Samsung Internet
 */
function updateInsetProperty( HTMLstring ) {
    var _allStyles =  HTMLstring.match(/style="([^"]*)"/g);
    var _insetBank = [];
    $.each(_allStyles, function(i, style){
        var onlyStyleInsetProperty = style.replace(/"/, '').match(/inset:\s?([A-Za-z\s0-9\.\-]+)?/i);
        if( onlyStyleInsetProperty != null ) {
            var _splitInset = onlyStyleInsetProperty[1].split(' ');
            var _insetReplacement = `top:${_splitInset[0]}; right:${_splitInset[1]}; bottom:${_splitInset[2]}; left:${_splitInset[3]}`;
            var formattedStyle = HTMLstring.replace(onlyStyleInsetProperty[0], _insetReplacement);
            HTMLstring = formattedStyle;
        }
    });

    return HTMLstring;
}

Then you can call the function like this.

var htmlCodeForMobile = updateInsetProperty(htmlTmp_mbl);
var htmlCodeForDesktop = updateInsetProperty(htmlTmp_dsk);

 // Note: htmlTmp_mbl is the HTML code for mobile from 
 // the editor (in my case) or HTML from your source 
 // while htmlTmp_dsk is the HTML for desktop.

user_10245459 · Answer

I have the same issue when i use angular ngStyle
[1] https://i.stack.imgur.com/GQu0V.png

I found a workaround, just for your reference. Hope it helps:
[2] https://i.stack.imgur.com/cNqVd.png

import { pick } from 'lodash';

getStyleByKeys(props, keys): any {
    let res = {};

    if ( !props ) { return {}; }
    if ( keys ) { res = pick(props, keys); }
    return res;
}
getStyleString(o: any): any {
    return Object.keys(o).reduce((style, i) => {
        style += `${i}: ${o[i]}; `;
        return style;
    }, '');
}
``

user_19992703 · Answer

Just had a similar issue. Adding "!important" into any one of position properties will prevent converting to inset (strangely enough).

In my case, for example, from this:

top: 0;
right: 0;
bottom: 0;
left: 0;

To this:

top: 0 !important;
right: 0;
bottom: 0;
left: 0;

Prevent Chrome browser from converting position property to inset

2 Answers