CSS grid feature detection is broken in Safari #416

Closed
rigdern opened this Issue Jul 18, 2014 · 1 comment

Comments

Projects
None yet
3 participants
@rigdern
Member

rigdern commented Jul 18, 2014

image

Our CSS grid feature detection technique doesn't work correctly in Safari. As illustrated by the screen shot, we think Safari supports CSS grid but it actually doesn't. This affects this ListView layouts as well as our attempts to disable unit tests for features that require CSS grid.

@banguero banguero added this to the M1 milestone Jul 18, 2014

@rigdern

This comment has been minimized.

Show comment Hide comment
@rigdern

rigdern Jul 21, 2014

Member

Looks like the ListView's technique correctly avoids CSS grid in Safari:

environmentDetails = {
    supportsCSSGrid: !!(browserStyleEquivalents["grid-row"] && browserStyleEquivalents["grid-rows"] && browserStyleEquivalents["grid-row-span"] &&
        browserStyleEquivalents["grid-column"] && browserStyleEquivalents["grid-columns"] && browserStyleEquivalents["grid-column-span"])
}

It's because Safari currently doesn't have a grid-row-span.

We still need to update the feature detection of the cell spanning tests so that they aren't run in Safari.

Member

rigdern commented Jul 21, 2014

Looks like the ListView's technique correctly avoids CSS grid in Safari:

environmentDetails = {
    supportsCSSGrid: !!(browserStyleEquivalents["grid-row"] && browserStyleEquivalents["grid-rows"] && browserStyleEquivalents["grid-row-span"] &&
        browserStyleEquivalents["grid-column"] && browserStyleEquivalents["grid-columns"] && browserStyleEquivalents["grid-column-span"])
}

It's because Safari currently doesn't have a grid-row-span.

We still need to update the feature detection of the cell spanning tests so that they aren't run in Safari.

rigdern added a commit that referenced this issue Jul 23, 2014

Fix CSS grid feature detection in tests #416
Cell spanning tests were running in Safari despite it not supporting CSS
grid. The problem is that Safari CSSStyleDeclarations have a property for
grid-column (specifically, -webkit-grid-column) despite the CSS engine
ignoring such attributes.

This was fixed by switching to a platform specific check for CSS grid
(checking for the existence of -ms-grid-row). This means that ListView
will only use CSS grid in IE. This is probably what we want because the
ListView's use of CSS grid is based on IE 10/11's implementation. If other
browsers were to implement CSS grid, ListView would have be updated anyway
to make use of the latest CSS grid standard.

rigdern added a commit that referenced this issue Jul 24, 2014

Fix CSS grid feature detection in tests #416
Cell spanning tests were running in Safari despite it not supporting CSS
grid. The problem is that Safari CSSStyleDeclarations have a property for
grid-column (specifically, -webkit-grid-column) despite the CSS engine
ignoring such attributes.

This was fixed by switching to a platform specific check for CSS grid
(checking for the existence of -ms-grid-row). This means that ListView
will only use CSS grid in IE. This is probably what we want because the
ListView's use of CSS grid is based on IE 10/11's implementation. If other
browsers were to implement CSS grid, ListView would have be updated anyway
to make use of the latest CSS grid standard.

@rigdern rigdern closed this Jul 24, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment