小编iaf*_*wik的帖子

缩放元素中的视频和z-index:一些div消失

我在Chrome和Safari中有一些奇怪的行为.我有一个scaled(transform: scale())容器,里面有视频和其他元素.在一些缩放中,具有高z指数的绝对定位元素消失并且不再返回.

我怎样才能解决这个问题？请注意,我不能给视频元素一个负z-index,我需要使用overflow: hidden;.

例

我做了一个例子,可以向上和向下扩展最外面的容器.在特定比例值处,具有类.on-top(和文本"I should always be on top.")的元素消失.当再次缩小时,它会突然出现.

链接到exmaple:https://jsfiddle.net/iafiawik/Lcox1ecc/

结论

看起来元素的大小很重要.我做得越大,它消失之前的比例值就越大.
我还测试了transform: scale(1.4)直接在元素上设置CSS,行为是一样的.

如果我这个问题不存在:

用div替换视频标签
position: absolute;从兄弟姐妹中删除.on-top(即.below)
overflow: hidden;从中移除.content
如果我移动.on-top,则将其放在文档流程中的视频标记之后

(但是当然,由于项目的具体原因,这些变通办法在现实中都不适用于我.我也不能给视频元素一个负面的z-index,我需要使用overflow: hidden;.)

来自社区的建议解决方法(谢谢!)

为视频标记提供负z-index(不能这样做,因为我有时会在视频后面放置元素)
删除overflow: hidden;(我无法删除overflow: hidden;)

浏览器

我在Chrome(Mac)和Safari(Mac)中看到了这个问题.

更新1

似乎这个错误报告几乎涵盖了我的问题.但是,它没有为它提供修复.

更新2

我通过提供解决这个问题的方法回答了我自己的问题.

更新3

有许多答案可以修改z-index视频或添加translateZ到.on-top元素.演示已经表明这两种方法都可以解决这个问题.但是,由于我的HTML结构是可视化HTML编辑器的输出(长篇故事......),我不知道它们将是什么元素,或者它们应该位于视频的前面,下面还是旁边.因此,我正在寻找一种解决方案,不需要更改缩放元素内的单个元素.

javascript css google-chrome z-index scaletransform

iaf*_*wik

2018 04-18

18
推荐指数

3
解决办法

796
查看次数

angularfireCollection:知道数据何时完全加载

我正在编写一个小的Angular Web应用程序,并且在加载数据时遇到了问题.我使用Firebase作为数据源,发现AngularFire项目听起来不错.但是,我无法控制数据的显示方式.

起初我尝试使用常规隐式同步:

angularFire(ref, $scope, 'items');

Run Code Online (Sandbox Code Playgroud)

它工作正常,当我在视图中使用模型$ items时显示所有数据.但是,当数据从Firebase数据源到达时,它的格式不会以视图支持的方式进行格式化,因此我需要在数据显示之前对数据进行一些额外的结构更改.问题是,我不知道数据何时完全加载.我尝试为$ items分配一个$ watch,但它被称为太早了.

所以,我继续前进并尝试使用angularfireCollection:

$scope.items = angularFireCollection(new Firebase(url), optionalCallbackOnInitialLoad);

Run Code Online (Sandbox Code Playgroud)

文档不是很清楚"optionalCallbackOnInitialLoad"的作用以及何时调用它,但是尝试访问$ items集合中的第一项将引发错误("Uncaught TypeError:无法读取未定义的属性'0'") .

我尝试添加一个按钮,在按钮的单击处理程序中,我记录了$ items中第一项的内容,并且它有效:

console.log($scope.items[0]);

Run Code Online (Sandbox Code Playgroud)

那是它!我的Firebase中的第一个对象显示没有任何错误...唯一的问题是我必须单击按钮才能到达那里.

那么,有没有人知道我怎么知道何时加载了所有数据然后将它分配给$ scope变量以显示在我的视图中？或者还有另一种方式吗？

我的控制器:

app.controller('MyController', ['$scope', 'angularFireCollection',
  function MyController($scope, angularFireCollection) {
    $scope.start = function()
    {
        var ref = new Firebase('https://url.firebaseio.com/days');
        console.log("start");

        console.log("before load?");

        $scope.items = angularFireCollection(ref, function()
        {
            console.log("loaded?");
            console.log($scope.items[0]); //undefined
        });  

        console.log("start() out");     
    };

    $scope.start();

    //wait for changes
    $scope.$watch('items', function() {
        console.log("items watch");
        console.log($scope.items[0]); //undefined
    });

    $scope.testData = function()
    { …

Run Code Online (Sandbox Code Playgroud)

angularjs firebase angularfire

iaf*_*wik

lucky-day

5
推荐指数

1
解决办法

1226
查看次数

在 iOS 中禁用选择/触地菜单

我有一个 React Native 新手问题。我正在尝试在 React View 类中使用 WebView，但我无法摆脱选择菜单。我不知道“选择菜单”是否是正确的术语，但当我按住鼠标/手指时它会出现。

我尝试过在 iPhone 上直接浏览 HTML 页面，但那里没有弹出“菜单”。

反应本机类：

var React = require('react-native');

var {
  WebView
} = React;

var TestWebView = React.createClass({
  render: function() {
    return (
      <WebView url="http://url/index.html" />
    );
  }
});

module.exports = TestWebView;

Run Code Online (Sandbox Code Playgroud)

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style type="text/css">
      body {
        background: pink;
      }

      body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: transparent; /* mobile webkit */
      } …

Run Code Online (Sandbox Code Playgroud)

webview react-native

iaf*_*wik

2015 10-04

5
推荐指数

0
解决办法

787
查看次数