单击它后,Safari链接无样式(在_blank中打开)。外部窗口关闭后重新设置样式

时间:2017-03-24 16:31:44

标签: css safari cross-browser

我有一个网站,所有链接在除Safari之外的主要浏览器中都能正常工作。在Safari中,如果用户点击带有target =" _blank"的链接然后返回原始选项卡,该链接不再被设置为链接。如果您随后关闭新打开的选项卡,则链接会立即更新为样式。

那是:

https://mysite.umich.edu/myapp我的网站中,我有以这种格式的链接:

const currentTime$ = props$.pluck('currentTime');
const $trailingCurrentTime = new Subject();

const stream$ = Observable
  .merge(currentTime$, $trailingCurrentTime)
  .audit(currentTime => setCurrentTime$(currentTime))
  .filter(currentTime => {
    if (currentTime !== player.currentTime) {
      $trailingCurrentTime.next(currentTime);
    }
    return currentTime === player.currentTime;
  });

在页面上,它看起来像这样:

Link with styling

当我点击该链接时,链接到的URL(词汇表)会在新选项卡中打开,然后我将转到该选项卡。如果我然后返回我开始的标签(https://mysite.umich.edu/myapp),该链接将不再被设置为链接:

Link without styling

如果那时,保持原始页面,我关闭新打开的标签(显示词汇表的标签),链接将立即返回到上面的第一个截图。

如果开发人员工具处于打开状态,问题不会发生,这使调试变得更加复杂。此外,一些点击序列将使问题消失,但我还没有能够重现这种效果。

似乎这必定是Safari中的某种计时问题。有没有人有任何关于如何解决它的线索?

1 个答案:

答案 0 :(得分:0)

Safari似乎存在某种时间问题,即使在用户将光标移离链接之后,它仍保留原始标签中的A:HOVER的CSS,但这不会是问题,如果我们有一个合理的CSS规则A:HOVER。由于我们的A:HOVER CSS规则将文本颜色设置为与默认文本相同的颜色,因此我们当然不能将链接与周围文本区分开来。更改CSS使这成为一个非问题。

所以似乎Safari行为不端,但在我们的情况下,至少有一种解决方法。