Iphone

Question

！UPDATE 刚刚在更大的元素上遇到了这个错误。猜测它与SVG无关，但与背景和边界无关。见图：

因此看起来边框背后的背景。奇怪的是，下一张照片（底部的切割照片）由相同的反应组件渲染。更奇怪的是，大约5秒后虫子消失了。也许有些服务器问题？我吓坏了...... =（

！更新 Browserstack在我的设置中不显示此错误。但我和我的朋友仍然在真正的手机上看到他们......

在iphone上有这个错误（在Safari和Chrome上）。 svg下面有些白色（有时是黑色）背景。我看着这张照片并且不知道真的发生了什么=（

SVG非常透明。桌面浏览器没有问题。该错误随机显示，最初可能会看到，但在一些交互后，它会消失，或者如果您重新加载页面，它可能会消失。奇怪的是真的。

如果有人告诉我它有什么问题，我将不胜感激。

这是这个圈子的jss代码......

  filter: {
    width: 64,
    height: 64,
    position: 'absolute',
    top: 11,
    right: 15,
    transition: 'transform 0.2s ease-out',
    '&:hover': {
      transform: 'scale(1.2)',
      transformOrigin: 'center',
    },
    cursor: 'pointer',
    outline: 'none',
  },

  filter0: {
    extend: 'filter',
    backgroundImage: `url(${sun})`,
    backgroundColor: 'white',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '48px',
    borderRadius: 32,
    boxSizing: 'border-box',
    border: `5px solid ${tastes[0].color}`,
  },

谢谢！

Answer 1

确定。这不是完整的答案，但是......

问题是仅在Iphone上的Safari上以300kbps的速度进行网络限制时显示。我认为这只是浏览器呈现背景和边框的方式。虽然网络限制，但在加载＆＃34; bug＆＃34;出现并在一段时间后消失。如果一些错误停留，它们会在开始向任何方向滚动后消失。

我希望这不是我糟糕的实现，而是一些浏览器渲染算法，这些元素的加载速度很慢。我也做了一些重构以加快速度，所以现在平均3g连接上没有看到问题。

您可以在此处查看视频错误 - Why do blocks run in this order?