Skip to content

Use solid color for table row border to fix Safari rendering issue #25682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gzdunek merged 5 commits into from
May 5, 2023
Merged

Use solid color for table row border to fix Safari rendering issue #25682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
26ac912
Use solid color for table row border to fix Safari rendering issue
gzdunek May 5, 2023
c320aaa
Use `emphasize` function
gzdunek May 5, 2023
e3ab21a
Improve comment
gzdunek May 5, 2023
f0625c4
Add fallback value to alpha
gzdunek May 5, 2023
71444d8
Clarify comment
gzdunek May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions web/packages/design/src/DataTable/StyledTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,16 @@ import styled from 'styled-components';

import { space, borderRadius } from 'design/system';

import { decomposeColor, emphasize } from 'design/theme/utils/colorManipulator';

import Icon from '../Icon';

export const StyledTable = styled.table(
props => `
background: ${props.theme.colors.levels.surface};
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;

Expand Down Expand Up @@ -73,11 +77,8 @@ export const StyledTable = styled.table(
line-height: 16px;
}

// When border-collapse: collapse is set on a table element, Safari incorrectly renders the row border with alpha channel.
// It looks like the collapsed border was rendered twice, that is, opacity 0.07 looks like opacity 0.14.
// A workaround is to not use collapse and apply border to td elements.
& > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid ${props.theme.colors.spotBackground[0]};
tbody tr {
border-bottom: 1px solid ${getSolidRowBorderColor(props.theme)};
}

tbody tr:hover {
Expand All @@ -89,6 +90,20 @@ export const StyledTable = styled.table(
borderRadius
);

// When `border-collapse: collapse` is set on a table element, Safari incorrectly renders row border with alpha channel.
// It looks like the collapsed border was rendered twice, that is, opacity 0.07 looks like opacity 0.14 (this is more visible
// on the dark theme).
// Sometimes, there is also an artifact visible after hovering the rows - some of them have correct border color, some not.
// WebKit issue https://bugs.webkit.org/show_bug.cgi?id=35456.
//
// `getSolidRowBorderColor` is a workaround. Instead of setting a color with an alpha channel to the border and letting
// the browser mix it with the background color, we calculate the final (non-alpha) color in the JS code.
// The final color is created by lightening or darkening the table background color by the value of the alpha channel of theme.colors.spotBackground[0].
function getSolidRowBorderColor(theme) {
const alpha = decomposeColor(theme.colors.spotBackground[0]).values[3] || 0;
return emphasize(theme.colors.levels.surface, alpha);
}

export const StyledPanel = styled.nav<{ showTopBorder: boolean }>`
padding: 16px 24px;
display: flex;
Expand Down
12 changes: 8 additions & 4 deletions ...ckages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,9 @@ exports[`render device dashboard 1`] = `

.c11 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -204,8 +206,8 @@ exports[`render device dashboard 1`] = `
line-height: 16px;
}

.c11 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c11 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c11 tbody tr:hover {
Expand Down Expand Up @@ -682,7 +684,9 @@ exports[`render failed state for creating restricted privilege token 1`] = `

.c12 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -746,8 +750,8 @@ exports[`render failed state for creating restricted privilege token 1`] = `
line-height: 16px;
}

.c12 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c12 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c12 tbody tr:hover {
Expand Down
12 changes: 8 additions & 4 deletions web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,9 @@ exports[`failed state 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -667,8 +669,8 @@ exports[`failed state 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down Expand Up @@ -1718,7 +1720,9 @@ exports[`loaded state 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -1780,8 +1784,8 @@ exports[`loaded state 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down
12 changes: 8 additions & 4 deletions web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,9 @@ exports[`list of all events 1`] = `

.c17 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -251,8 +253,8 @@ exports[`list of all events 1`] = `
line-height: 16px;
}

.c17 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c17 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c17 tbody tr:hover {
Expand Down Expand Up @@ -7699,7 +7701,9 @@ exports[`loaded audit log screen 1`] = `

.c21 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -7765,8 +7769,8 @@ exports[`loaded audit log screen 1`] = `
line-height: 16px;
}

.c21 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c21 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c21 tbody tr:hover {
Expand Down
6 changes: 4 additions & 2 deletions web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,9 @@ exports[`render clusters 1`] = `

.c19 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -304,8 +306,8 @@ exports[`render clusters 1`] = `
line-height: 16px;
}

.c19 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c19 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c19 tbody tr:hover {
Expand Down
6 changes: 4 additions & 2 deletions ...ckages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,9 @@ exports[`render DocumentNodes 1`] = `

.c30 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -315,8 +317,8 @@ exports[`render DocumentNodes 1`] = `
line-height: 16px;
}

.c30 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c30 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c30 tbody tr:hover {
Expand Down
12 changes: 8 additions & 4 deletions web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,7 +534,9 @@ exports[`failed 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -596,8 +598,8 @@ exports[`failed 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down Expand Up @@ -1385,7 +1387,9 @@ exports[`open source loaded 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -1447,8 +1451,8 @@ exports[`open source loaded 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down
12 changes: 8 additions & 4 deletions web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,9 @@ exports[`failed 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -556,8 +558,8 @@ exports[`failed 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down Expand Up @@ -1304,7 +1306,9 @@ exports[`loaded 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -1366,8 +1370,8 @@ exports[`loaded 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down
12 changes: 8 additions & 4 deletions web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,9 @@ exports[`failed 1`] = `

.c24 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -607,8 +609,8 @@ exports[`failed 1`] = `
line-height: 16px;
}

.c24 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c24 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c24 tbody tr:hover {
Expand Down Expand Up @@ -1640,7 +1642,9 @@ exports[`loaded 1`] = `

.c27 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
}
Expand Down Expand Up @@ -1702,8 +1706,8 @@ exports[`loaded 1`] = `
line-height: 16px;
}

.c27 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c27 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c27 tbody tr:hover {
Expand Down
6 changes: 4 additions & 2 deletions web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,9 @@ exports[`rendering of Session Recordings 1`] = `

.c21 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
font-size: 12px;
width: 100%;
border-top-left-radius: 0px;
Expand Down Expand Up @@ -456,8 +458,8 @@ exports[`rendering of Session Recordings 1`] = `
line-height: 16px;
}

.c21 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
.c21 tbody tr {
border-bottom: 1px solid rgb(49,58,100);
}

.c21 tbody tr:hover {
Expand Down
Loading