Question

我正在一个React 16.9.0网站上工作，该网站旨在在像this这样的旧电视框内显示YouTube视频！。它似乎可以在除IOS Safari之外的所有浏览器上运行，该浏览器在几毫秒后消失，最终看起来像this！。

我使用了多个CSS参数，包括添加-webkit-border-image以及尝试this！无济于事。

App.css：

.App-landscape {
 text-align: center; 
}

.Video {
  position: relative;
  top: 2vh;
  width: 100%;
  height: 100%;
  }

.Video-frame {
  width: 144vh; 
  height: 45.5625vw;
  min-height: 30vh;
  max-height: 80vh;
  max-width: 60vw;
  padding-right: 6vw;
  padding-bottom:5vh; 
}

.Video-frame:before {
  content: " ";
  position: absolute;
  margin-left: -1vw; 
  z-index: 1;
  width: 144vh; 
  height: 36.9056vw;
  max-height: 70vh;
  max-width: 60vw;
  border-style: solid;
  border-color: transparent;
  border-top: 8vh solid transparent;
  border-bottom: 7vh solid transparent;
  border-right: 6vw solid transparent;
  border-left:  8vw solid transparent;
  -webkit-border-image: url(./tv.png) 100 fill;
  -moz-border-image: url(./tv.png) 100 fill;
  -o-border-image: url(./tv.png) 100 fill;
  border-image: url(./tv.png) 100 fill;
  pointer-events: none;
}

.App-header-landscape {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.Fullscreen {
  border: none;
  border-radius: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #61dafb;
  cursor: pointer;
  display: inline-block;
  color:white;
  font-size: calc(10px + 2vmin);
}

App.js：

import React, { Component } from 'react';
import { isMobile } from "react-device-detect";
import Fullscreen from "react-full-screen";
import logo from './oak25.png';
import phone from './phone.png';
import './App.css';

class App extends Component {
  constructor(props) {
    super();

    this.state = {
      isFull: false,
    };
  }

  refreshPage = () => {
    window.location.reload(false);
  }

  goFull = () => {
    this.setState({ isFull: true });
  }

  render() {

    window.onorientationchange = this.refreshPage;

    if (window.innerHeight > window.innerWidth && isMobile) {
      # IRRELEVANT #
    }
    else {
      return (
        <Fullscreen
          enabled={this.state.isFull}
        >
          <div className="App-landscape">
            <header className="App-header-landscape">
              <div className="Video-frame">
                <iframe title="video" className="Video" src="https://www.youtube.com/embed/f1-2xRx2gnE?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
            </header>
          </div>
        </Fullscreen>
      );
    }
  }

}
export default App;

No error messages but the expected outcome is for the TV border to show on IOS devices instead of disappearing after a few ms.

CSS边框图片在IOS Safari上消失了

0 个答案: