I've been trying to use CSS3 perspective to show boxes in some angle (You can see the sample implementation here: https://jsfiddle.net/kiran554/x96f528c/2/). But I've been having trouble to highlight (hover) lower boxes in the container. The same implementation works fine in Firefox where I'm able to highlight every box in the container including last row of boxes. But strangely it doesn't work well in chrome.
Can someone enlighten me about what I'm doing wrong, which is causing chrome/safari to behave this way?
One guess I can take is that the perspective div is not completely visible. However, when I remove flexbox from the parent container it works fine although the entire perspective div is not visible. Additionally using higher perspective or lower rotation degree values fixes the issue but that not the correct representation of container for my app.
Below is my CSS:
/********** Range Input Styles **********/
/*Range Reset*/
.fab-bins-view,
.fab-bins__bin {
justify-content: center;
align-items: center;
display: flex;
}
.fab-bins-view {
height: 100%;
width: 100%;
}
.fab-bins-view--hide,
.fab-bin-controls--hide,
.inactive-job {
position: absolute;
left: -9999px;
top: -9999px;
}
.use-case-container {
width: 100% !important;
}
.browser-compatibility-warning {
position: absolute !important;
z-index: 3001;
left: 10rem;
}
.floating-error-boundary-container {
position: absolute;
opacity: 0.5;
}
.fab-bins-view {
position: absolute;
top: 0;
left: 0;
}
.fab-bins {
position: relative;
overflow: hidden;
z-index: 1001;
}
.fab-bins--right {
perspective: 6.12vw;
}
.fab-bins--right>div {
transform: rotateY(20deg);
height: 100%;
position: relative;
}
.fab-bins--right .fab-bins__bin {
font-size: 16px !important;
}
.fab-bins--left {
perspective: 8.12vw;
}
.fab-bins--left>div {
transform: rotateY(20deg);
height: 100%;
position: relative;
}
.fab-bins--left .fab-bins__bin {
font-size: 16px !important;
}
.fab-bins--disabled {
cursor: not-allowed !important;
}
.fab-bins__bin {
position: absolute;
box-sizing: border-box;
cursor: pointer;
color: black;
font-weight: 400 !important;
font-size: 14px !important;
user-select: none;
-webkit-user-select: none;
}
.fab-bins__bin:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid red;
background-color: var("orange", "transparent");
}
.fab-bins__bin:hover,
.fab-bins__bin[data-selected] {
background-color: red !important;
}
.fab-bins__bin--transparent-border:before {
border: transparent !important;
}
.fab-bins__bin--disabled {
pointer-events: none;
}
.fab-bin-controls {
position: absolute;
left: 100%;
z-index: 1999;
width: 34%;
top: 0;
}
And its corresponding HTML
<div class="fab-bins-view" data-testid="fab-bins-view">
<!-- <div class="kiran">Kiran</div> -->
<div class="fab-bins fab-bins--left" style="margin-left: 0px; width: 365px; height: 487px;">
<div>
<div class="fab-bins__bin" data-bin-id="1J" data-bin-scannable-id="P-7-A737V515" data-row-count="10" data-column-count="4" data-row="1" data-column="1" style="height: 113.053px; width: 60.7176px; bottom: 310.483px; left: 121.616px; --background-color:transparent; opacity: 1;">1J</div>
<div class="fab-bins__bin" data-bin-id="2J" data-bin-scannable-id="P-7-A737V516" data-row-count="10" data-column-count="4" data-row="1" data-column="2" style="height: 113.053px; width: 60.7176px; bottom: 310.483px; left: 182.616px; --background-color:transparent; opacity: 1;">2J</div>
<div class="fab-bins__bin" data-bin-id="3J" data-bin-scannable-id="P-7-A737V517" data-row-count="10" data-column-count="4" data-row="1" data-column="3" style="height: 113.053px; width: 60.7176px; bottom: 310.483px; left: 243.616px;">3J</div>
<div class="fab-bins__bin" data-bin-id="4J" data-bin-scannable-id="P-7-A737V518" data-row-count="10" data-column-count="4" data-row="1" data-column="4" style="height: 113.053px; width: 60.7176px; bottom: 310.483px; left: 304.616px;">4J</div>
<div class="fab-bins__bin" data-bin-id="1I" data-bin-scannable-id="P-7-A556V499" data-row-count="10" data-column-count="4" data-row="2" data-column="1" style="height: 60.2398px; width: 60.7176px; bottom: 247.767px; left: 121.616px; --background-color:transparent; opacity: 1;">1I</div>
<div class="fab-bins__bin" data-bin-id="2I" data-bin-scannable-id="P-7-A556V500" data-row-count="10" data-column-count="4" data-row="2" data-column="2" style="height: 60.2398px; width: 60.7176px; bottom: 247.767px; left: 182.616px;">2I</div>
<div class="fab-bins__bin" data-bin-id="3I" data-bin-scannable-id="P-7-A556V501" data-row-count="10" data-column-count="4" data-row="2" data-column="3" style="height: 60.2398px; width: 60.7176px; bottom: 247.767px; left: 243.616px; --background-color:transparent; opacity: 1;">3I</div>
<div class="fab-bins__bin" data-bin-id="4I" data-bin-scannable-id="P-7-A556V502" data-row-count="10" data-column-count="4" data-row="2" data-column="4" style="height: 60.2398px; width: 60.7176px; bottom: 247.767px; left: 304.616px; --background-color:transparent; opacity: 1;">4I</div>
<div class="fab-bins__bin" data-bin-id="1H" data-bin-scannable-id="P-7-A466V707" data-row-count="10" data-column-count="4" data-row="3" data-column="1" style="height: 60.2398px; width: 60.7176px; bottom: 184.639px; left: 121.616px; --background-color:transparent; opacity: 1;">1H</div>
<div class="fab-bins__bin" data-bin-id="2H" data-bin-scannable-id="P-7-A466V708" data-row-count="10" data-column-count="4" data-row="3" data-column="2" style="height: 60.2398px; width: 60.7176px; bottom: 184.639px; left: 182.616px;">2H</div>
<div class="fab-bins__bin" data-bin-id="3H" data-bin-scannable-id="P-7-A466V709" data-row-count="10" data-column-count="4" data-row="3" data-column="3" style="height: 60.2398px; width: 60.7176px; bottom: 184.639px; left: 243.616px;">3H</div>
<div class="fab-bins__bin" data-bin-id="4H" data-bin-scannable-id="P-7-A466V710" data-row-count="10" data-column-count="4" data-row="3" data-column="4" style="height: 60.2398px; width: 60.7176px; bottom: 184.639px; left: 304.616px; --background-color:transparent; opacity: 1;">4H</div>
<div class="fab-bins__bin" data-bin-id="1G" data-bin-scannable-id="P-7-A329V879" data-row-count="10" data-column-count="4" data-row="4" data-column="1" style="height: 60.2398px; width: 60.7176px; bottom: 121.924px; left: 121.616px; --background-color:transparent; opacity: 1;">1G</div>
<div class="fab-bins__bin" data-bin-id="2G" data-bin-scannable-id="P-7-A329V880" data-row-count="10" data-column-count="4" data-row="4" data-column="2" style="height: 60.2398px; width: 60.7176px; bottom: 121.924px; left: 182.616px;">2G</div>
<div class="fab-bins__bin" data-bin-id="3G" data-bin-scannable-id="P-7-A329V881" data-row-count="10" data-column-count="4" data-row="4" data-column="3" style="height: 60.2398px; width: 60.7176px; bottom: 121.924px; left: 243.616px;">3G</div>
<div class="fab-bins__bin" data-bin-id="4G" data-bin-scannable-id="P-7-A329V882" data-row-count="10" data-column-count="4" data-row="4" data-column="4" style="height: 60.2398px; width: 60.7176px; bottom: 121.924px; left: 304.616px;">4G</div>
<div class="fab-bins__bin" data-bin-id="1F" data-bin-scannable-id="P-7-A267V487" data-row-count="10" data-column-count="4" data-row="5" data-column="1" style="height: 60.2398px; width: 60.7176px; bottom: 59.2083px; left: 121.616px; --background-color:transparent; opacity: 1;">1F</div>
<div class="fab-bins__bin" data-bin-id="2F" data-bin-scannable-id="P-7-A267V488" data-row-count="10" data-column-count="4" data-row="5" data-column="2" style="height: 60.2398px; width: 60.7176px; bottom: 59.2083px; left: 182.616px; --background-color:transparent; opacity: 1;">2F</div>
<div class="fab-bins__bin" data-bin-id="3F" data-bin-scannable-id="P-7-A267V489" data-row-count="10" data-column-count="4" data-row="5" data-column="3" style="height: 60.2398px; width: 60.7176px; bottom: 59.2083px; left: 243.616px;">3F</div>
<div class="fab-bins__bin" data-bin-id="4F" data-bin-scannable-id="P-7-A267V490" data-row-count="10" data-column-count="4" data-row="5" data-column="4" style="height: 60.2398px; width: 60.7176px; bottom: 59.2083px; left: 304.616px; --background-color:transparent; opacity: 1;">4F</div>
<div class="fab-bins__bin" data-bin-id="1E" data-bin-scannable-id="P-7-A111V255" data-row-count="10" data-column-count="4" data-row="6" data-column="1" style="height: 60.2398px; width: 60.7176px; bottom: -3.91972px; left: 121.616px; --background-color:transparent; opacity: 1;">1E</div>
<div class="fab-bins__bin" data-bin-id="2E" data-bin-scannable-id="P-7-A111V256" data-row-count="10" data-column-count="4" data-row="6" data-column="2" style="height: 60.2398px; width: 60.7176px; bottom: -3.91972px; left: 182.616px; --background-color:transparent; opacity: 1;">2E</div>
<div class="fab-bins__bin" data-bin-id="3E" data-bin-scannable-id="P-7-A111V257" data-row-count="10" data-column-count="4" data-row="6" data-column="3" style="height: 60.2398px; width: 60.7176px; bottom: -3.91972px; left: 243.616px; --background-color:transparent; opacity: 1;">3E</div>
<div class="fab-bins__bin" data-bin-id="4E" data-bin-scannable-id="P-7-A111V258" data-row-count="10" data-column-count="4" data-row="6" data-column="4" style="height: 60.2398px; width: 60.7176px; bottom: -3.91972px; left: 304.616px; --background-color:transparent; opacity: 1;">4E</div>
</div>
</div>
<div data-testid="fab-bin-controls" class="fab-bin-controls awsui_column-layout_vvxn7_1dufc_93">
<div class="awsui_grid_14yj0_4ajio_93 awsui_grid_vvxn7_1dufc_106 awsui_grid-columns-1_vvxn7_1dufc_124 awsui_grid-horizontal-borders_vvxn7_1dufc_188 awsui_no-gutters_14yj0_4ajio_109 awsui_grid-breakpoint-default_vvxn7_1dufc_121">
<div class="awsui_grid-column_14yj0_4ajio_113 awsui_colspan-12_14yj0_4ajio_232">
<div class="awsui_restore-pointer-events_14yj0_4ajio_282">
<div class="fab-bin-controls__overlay-visibility"><i> Bin overlay visibility: </i><span data-testid="fab-bins-overlay-switch" class="awsui_wrapper_1wepg_14wzx_110 awsui_root_4yi2u_13fva_93"><span class="awsui_label-wrapper_1wepg_14wzx_117"><span class="awsui_control_1wepg_14wzx_153 awsui_toggle-control_4yi2u_13fva_126 awsui_toggle-control-checked_4yi2u_13fva_135"><span class="awsui_toggle-handle_4yi2u_13fva_145 awsui_toggle-handle-checked_4yi2u_13fva_157"></span><input id=":r6:" class="awsui_native-input_1wepg_14wzx_106" type="checkbox" checked=""><span class="awsui_outline_1wepg_14wzx_99 awsui_outline_4yi2u_13fva_107"></span></span><span class="awsui_content_1wepg_14wzx_93 awsui_empty-content_1wepg_14wzx_129"></span></span></span></div>
</div>
</div>
<div class="awsui_grid-column_14yj0_4ajio_113 awsui_colspan-12_14yj0_4ajio_232">
<div class="awsui_restore-pointer-events_14yj0_4ajio_282">
<div class="fab-bin-controls__calibration-inputs"><i> Bin overlay correction: </i><input type="range" data-testid="fab-bins-v-calibration-input" max="7" min="-3"><input type="range" data-testid="fab-bins-h-calibration-input" max="7" min="-7"></div>
</div>
</div>
<div class="awsui_grid-column_14yj0_4ajio_113 awsui_colspan-12_14yj0_4ajio_232">
<div class="awsui_restore-pointer-events_14yj0_4ajio_282">
<div class="fab-bin-controls__pod-info">
<div class="awsui_root_18wu0_1n6nk_93 awsui_box_18wu0_1n6nk_207 awsui_color-default_18wu0_1n6nk_207 awsui_font-size-default_18wu0_1n6nk_223 awsui_font-weight-default_18wu0_1n6nk_263 awsui_t-left_18wu0_1n6nk_397">
<div class="awsui_root_18582_3m3ph_93 awsui_vertical_18582_3m3ph_140 awsui_vertical-xxxs_18582_3m3ph_143">
<div class="awsui_child_18582_3m3ph_97">
<div> <i>Drive type:</i> <span style="white-space: nowrap;">ATLAS</span></div>
</div>
<div class="awsui_child_18582_3m3ph_97">
<div> <i>Pod face rows:</i> <span>10</span></div>
</div>
<div class="awsui_child_18582_3m3ph_97">
<div> <i>Pod face columns:</i> <span>4</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="awsui_grid-column_14yj0_4ajio_113 awsui_colspan-12_14yj0_4ajio_232">
<div class="awsui_restore-pointer-events_14yj0_4ajio_282">
<div class="fab-bin-controls__active-bin-info"></div>
</div>
</div>
</div>
</div>
</div>