styled output causes linebreaks in Chrome but not Firefox

selection-snippet.js

// FIXME?
document.styleSheets[document.styleSheets.length - 1].addRule("::selection", "background: red; color: pink");

document.addEventListener('selectionchange', e => {
    console.clear();
    slice = document.getSelection().toString();
    if (slice !== "") {
        parent = document.getSelection().getRangeAt(0).commonAncestorContainer.textContent;
        preSlice = parent.slice(0, parent.indexOf(slice));
        postSlice = parent.slice(parent.indexOf(slice) + slice.length, parent.length - 1);
        // string = preSlice + slice.toUpperCase() + postSlice;
        //
        // Firefox ✔️  Chrome ✖️
        //
        otherStyle = 'font-weight: normal'; 
        sliceStyle = 'font-weight: bold'; 
        string = "%c"+ preSlice + '%c' + slice + '%c' + postSlice;
        console.log(string, otherStyle, sliceStyle, otherStyle);
        //
        // Firefox ✔️  Chrome ✔️
        //
        // string = preSlice + '{{ ' + slice.toUpperCase() + ' }}' + postSlice;
        // console.log(string);
    }
})

maybe use range's container instead of commonAnscestor ... to capture context, eg. ranges that cross paragraphs