Chrome 45 Version Absolute Problem

My mvc application has kendo grids, and I used position:absolute;tr: firstChild, td: firstChild for the table to achieve freezing columns. We recently upgraded to Chrome 45 on our servers and in Chrome, the table goes as <(col1), (empty space), (col2), (col3)> and every other browser (including previous versions of Chrome) renders my table in the correct format <(col1), (col2), (col3)>.

I can't even check this empty spot on my chrome.

The solutions I found are:

I wrote some CSS ie:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .tablexyz tbody th:first-child,
    .tablexyz tbody tr:first-child {
        position: relative;
        width: 240px;
        top: auto;
        left: 20px;
    }
}

Then I use jQuery on my pages and install it manually in absolute order and it works fine:

$(".tablexyz tbody th:first-child").css({
    position: "absolute",
    width:"240px",
    top:"auto",
    left : "20px"
});

What causes the main problem? How can I only resolve this with CSS?

+4
2

, , .

jsfiddle:

https://jsfiddle.net/j8fr2m1a/

<table border="1">
    <tr>
        <th>Alpha</th>
        <th>Beta</th>
        <th>Gamma</th>
    </tr>
    <tr>
        <td style="float:right;">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr>
        <th style="float:left;">Alpha</th>
        <th>Beta</th>
        <th style="float:left;">Gamma</th>
    </tr>
    <tr>
        <td style="float:right;">1</td>
        <td>2</td>
        <td style="float:right;">3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr>
        <th>Alpha</th>
        <th>Beta</th>
        <th>Gamma</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr><th>Alpha</th><th>Beta</th><th>Gamma</th></tr>
    <tr><td style="float:right;">1</td><td>2</td><td>3</td></tr>
</table>

45 :

, , , phantom .

, , ( ) , .

+2

Chrome 45.0.2454.85 , , - true - mhodges44 ( ). ; , Chromium.

, , , css, margin-left: -10px. , , , , - @media screen and (-webkit-min-device-pixel-ratio:0), .

+1

Source: https://habr.com/ru/post/1606120/


All Articles