Question

我在 safari 上遇到了兼容性问题。我制作了一个 Web 应用程序，但不幸的是它无法正确显示。我不确定它有什么问题。我已经检查了我可以使用的所有样式，一切都应该没问题。我认为问题可能出在 CSS 中的 .car__hubcap 和变量上，这通常是一个不受欢迎的解决方案。

.car-wrapper {
     background-image: url('#');
     background-size: cover;
     background-position: center;
     flex-basis: 68vh;
     width: 100vw;
     position: relative;
     margin-left: auto;
}
 .car-menu {
     height: 60vh;
     left: 0;
     top: 0;
     width: 12vw;
     position: absolute;
}
 .car-menu__model-list {
     width: 12vw;
     overflow: scroll;
     background-color: white;
}
 .car-menu__color-list {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 12vw;
     overflow: scroll;
     background-color: white;
}
 .car-menu__li {
     width: 100%;
     cursor: pointer;
}
 .car-menu__li img {
     object-fit: cover;
     width: 100%;
}
 .car {
     display: flex;
     margin: 0;
     padding: 0;
     position: relative;
     width: 100%;
     height: auto;
     transform: translateY(-50%);
     top: 50%;
     padding-left: -10vw;
}
 .car--size {
     --d: 4;
    /* diameter of wheels. Doesn't matter what units - just use the same units for all these measurements*/
     --lf: 6.38;
    /* distance from left edge of the image to center of front wheel */
     --rb: 7.5;
    /* distance from right edge of the image to center of back wheel */
     --bf: 2.45;
    /* distance from bottom of image to center of front wheel */
     --bb: 2.45;
    /* distance from bottom of image to center of back wheel */
     --w: 30;
    /* width of the image */
     --h: 11;
    /* height of the image */
}
 .car--size-default {
     --d: 4;
     --lf: 6.38;
     --rb: 7.5;
     --bf: 2.45;
     --bb: 2.45;
     --w: 30;
     --h: 11;
}
 .car--size-mercedes {
     --d: 4;
     --lf: 6.38;
     --rb: 8.55;
     --bf: 2.45;
     --bb: 2.45;
     --w: 30;
     --h: 11;
}
 .car--size-range {
     --d: 4.4;
     --lf: 6.38;
     --rb: 8.33;
     --bf: 2.45;
     --bb: 2.45;
     --w: 30;
     --h: 11;
}
 .car--size-vw {
     --d: 4;
     --lf: 6.38;
     --rb: 7.1;
     --bf: 2.45;
     --bb: 2.45;
     --w: 30;
     --h: 11;
}
 .car--size-fiat {
     --d: 3.3;
     --lf: 6.38;
     --rb: 9.65;
     --bf: 2.35;
     --bb: 2.35;
     --w: 30;
     --h: 11;
}
 .car--size-van {
     --d: 2.9;
     --lf: 5.95;
     --rb: 8.53;
     --bf: 2.15;
     --bb: 2.15;
     --w: 30;
     --h: 11;
}
 .car--size-bus {
     --d: 2;
     --lf: 6.42;
     --rb: 9.5;
     --bf: 1.5;
     --bb: 1.5;
     --w: 30;
     --h: 11;
}
 .car--size-truck {
     --d: 2.2;
     --lf: 8.625;
     --rb: 12.45;
     --bf: 1.55;
     --bb: 1.55;
     --w: 30;
     --h: 11;
}
 .car__hubcap {
     position: absolute;
     width: calc((var(--d) / var(--w)) * 100%);
     height: calc((var(--d) / var(--h)) * 100%);
     background-image: url('#');
     background-position: center;
     background-size: cover;
     border-style: solid;
}
 .car--hubcap-front {
     bottom: calc((var(--bf) / var(--h)) * 100%);
     left: calc((var(--lf) / var(--w)) * 100%);
     transform: translateX(-50%) translateY(50%);
}
 .car--hubcap-back {
     bottom: calc((var(--bb) / var(--h)) * 100%);
     right: calc((var(--rb) / var(--w)) * 100%);
     transform: translateX(50%) translateY(50%);
}
 .car__img {
     margin: 0 auto;
     width: 100%;
}
 .logo {
     position: absolute;
     width: 10vw;
     top: 0;
     right: 5%;
     overflow: visible !important;
}
 .background-menu {
     position: absolute;
     bottom: 0;
     right: 0;
}
 .background-menu__element img {
     width: 5vw;
     cursor: pointer;
}
 .is-hidden {
     display: none !important;
     z-index: -1 !important;
}
 .visibility {
     visibility: hidden;
}
 .is-hidden .splide__arrows {
     visibility: hidden;
}

<main class="car car--size-default">
                        <img src="#" class="car__img">
                        <div class="car__hubcap car--hubcap-front"></div>
                        <div class="car__hubcap car--hubcap-back"></div>
                        <img src="#" alt="górecki logo" class="logo">
                        <ul class="background-menu">
                                <li class="background-menu__element"><img src="#"
                                                class="background-menu__image" data-background="tlo_4"></li>
                                <li class="background-menu__element"><img src="#"
                                                class="background-menu__image" data-background="tlo_2"></li>
                                <li class="background-menu__element"><img src="#"
                                                class="background-menu__image" data-background="tlo_3"></li>
                        </ul>
                </main>

如果您有任何问题，请随时提问:)

safari 兼容性问题

0 个答案: