stackoom
  简体   繁体   中英

why Span element baseline has changed after updating chrome browser to version starts from 108

 原文  2022-12-05 11:44:54  4   2    javascript/ html/ css/ google-chrome

Question

After updating to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit) The span element got severely affected. It just changed it's baseline when multiple span were place one top of other.

Expected beaviour: Span should grow on top-wards(v-107) not on bottom-wards(v-108) direction.

in version 107.0.5304.87 of chrome在此处输入图像描述

in version 108.0.5359.94 of chrome在此处输入图像描述

Uploaded the code and it give any of the result as shown in above 2 images based on your chrome version. 

 <html> <body> <div dir="auto" style="line-height: 2.5; text-align: left;"> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> </div> </body> </html>

How to get old behaviour in new updated google chrome version?

2 answers

solution1
 1  2022-12-05 11:48:34

<html><head></head><body>
        <div dir="auto" style="line-height: 2.5;text-align: left;display: flex;flex-wrap: wrap;">
    
                <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0);background: rgb(255, 255, 255);position: relative;padding: 0px;cursor: default;display: flex;flex-direction: column-reverse;opacity: 0.9;line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px;height: 23px;background: rgb(255, 0, 199);position: absolute;z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
            </div>


</body></html>

The changes are:

  • display: flex; flex-wrap: wrap; - to the wrapping div
  • align-self: flex-end; - to the content that should stay on the bottom
  • line-height: 1.5em; - to the items that should be properly aligned to the baseline

solution2
 1 ACCPTED  2022-12-06 02:23:07

The change comes from this CL , which links to the issue 885175 .
From that issue we can see that Chrome did implement the align-self: last baseline value.

Note: I kind of discover this value and I'm not 100% confident on what exactly happened before, happens now, or, should happen. If one wants to correct me, please do so.

The default value for align-self apparently becomes first baseline in their new implementation. I'm not sure what it was before (or what it is in other UAs), computing the value auto is bit of a rabbit hole for me, but it apparently had the same behavior as last baseline , and at least not the same as current Chrome's first baseline .

So, to get the same behavior in Chrome >= 108 than in other UAs and previous Chromes, you can force the align-self value of your inner flex containers (basically your <mark> elements) to be last baseline .

Here is a minimal-repro with the fix: 

 .parent-flex { display: inline-flex; align-items: flex-end; }.column { display: flex; flex-direction: column-reverse; } /* For the demo we apply the fix only when the input is checked. You would obviously add it in your.column rule, or in OP's case on their <mark> elements */:checked ~ *.column { align-self: last baseline; }
 <label for=inp>Apply the fix</label><input type=checkbox id=inp><br><br> <span>Inline</span> <span class="parent-flex"> <span class="column"> <span>row</span> <span>row</span> <span>row</span> </span> </span>

And OP's very not minimal code with the fix: 

 mark { align-self: last baseline }
 <div dir="auto" style="line-height: 2.5; text-align: left;"> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why is my span element not updating after function call? Copy the value from one element to another after value has changed? Apply 'keypress' function() to next <span> element once the 'keypress' has changed the class of the selected <span> element Span element not updating correctly How to make chrome/browser understand that the javascript code has changed? why element starts rotating only after timer ends Layout process slows down after updating Chrome to version 60 MongoDB no longer starts after updating Chrome Mobile 108: touchcancel not firing How to check if element is empty after the DOM has changed?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM