无法摆脱蓝色高光答案

【问题标题】：Having trouble getting rid of the blue highlight无法摆脱蓝色高光
【发布时间】：2018-12-30 09:01:04
【问题描述】：

我一直在研究具有可展开/可折叠部分的部分。当我单击某个部分以展开或折叠它时，会出现一个蓝色焦点区域，但它被放置在一个奇怪的角度。我不知道是什么原因造成的，并且想要一个解决方案来摆脱它或将它放回正常的水平角度。有人对如何解决这个问题有任何建议吗？

我使用的是 Macbook 和 Chrome 浏览器。

这个组件出现的整个灰色块被放置在一个角度，从下面附加的图像顶部可以看到，但与突出显示的焦点区域相反。

我的 CSS：

@import '../../theme/variables.css';

.rotatedSection {
  padding-bottom: 2rem;
}

.container {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  padding: 2rem 0;
  @media screen and (max-width: 68rem) {
    margin: 0 3rem;
  }
}

.accordianContainer {
  flex: 1;
  margin-right: 2rem;
  min-width: 500px;
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-right: 0;
  }
  @media screen and (max-width: 900px) {
    min-width: 0;
  }
}

.imageContainer {
  flex: 1;
  margin-left: 2rem;
  max-height: 300px;
  display: flex;
  justify-content: center;
  img {
    flex: 1;
  }
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-left: 0;
  }
}

.heading {
  composes: h2 from 'theme/text';
  margin-left: auto;
  margin-right: auto;
}

我的反应代码：

import React, {Component, PropTypes} from 'react';

import RotatedSection from 'components/RotatedSection';
import AccordionItem from './AccordionItem';

import css from './styles.css';

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

    this.state = {
      activeIndex: null,
    };

    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.setActive = this.setActive.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  onOpen = (index) => {
    this.setActive(index);
  };

  onClose = (callback = () => null) => {
    this.setActive(null);
    callback();
  };

  setActive = (activeIndex) => this.setState({activeIndex});

  handleClickOutside = () => this.props.collapseOnBlur && this.onClose();

  render () {
    const {
      entry: {
        items,
        heading,
        image,
      },
      showIndex,
      classNames,
      meta = {},
    } = this.props;

    const {routeParams, toggleHamburger} = meta;
    const {activeIndex} = this.state;

    return (
      <RotatedSection color='whisper' className={css.rotatedSection}>
        <div className={css.container}>
          <div className={css.accordianContainer}>
            <h2 className={css.heading}>{heading}</h2>
            {items && items.map((item, index) => (
              <AccordionItem
                key={index}
                showIndex={showIndex}
                entry={item}
                meta={{
                  position: index,
                  isOpen: (index === activeIndex),
                  onOpen: () => this.onOpen(index),
                  onClose: () => this.onClose(),
                  onChildClick: () => this.onClose(toggleHamburger),
                  routeParams,
                }}
                classNames={classNames}
              />
            ))}
          </div>
          <div className={css.imageContainer}>
            <img src={image && image.fields && image.fields.file.url} alt='Educational assessment' />
          </div>
        </div>
      </RotatedSection>
    );
  }
}

AccordionSectionWithImage.propTypes = {
  meta: PropTypes.object,
  entry: PropTypes.object,
  collapseOnBlur: PropTypes.bool,
  showIndex: PropTypes.bool,
  classNames: PropTypes.object,
};

export default AccordionSectionWithImage;

单个部分的 React 组件：

function AccordionItem (props) {
  const {
    meta: {
      isOpen,
      onOpen,
      onClose,
    },
    entry: {
      heading,
      text,
    },
  } = props;

  const handleClick = () => (isOpen ? onClose() : onOpen());

  return (
    <div className={css.itemContainer}>
      <div className={css.innerContainer}>
        <h3 className={css.heading} onClick={handleClick}>
          <span className={css.titleText}>{heading}</span>
          <i className={`zmdi zmdi-plus ${css.titleToggle}`} />
        </h3>
        {isOpen && (
          <div className={css.contents}>
            {text}
          </div>
        )}
      </div>
    </div>
  );
}

【问题讨论】：

很可能是继承的样式。你必须使用 Chrome 检查来查看它是什么元素以及为什么它的样式是这样的。它可能是多种样式的混合，其中一种样式应用颜色，另一种样式应用旋转。
我无法在 Chrome 检查器中找到该元素。它似乎是一种积极的风格，但在该区域的所有元素上强制使用积极的特征并不能重现它。只需点击它。
我在您发布的 CSS 中看不到该样式。您必须使用检查器进行探索才能找到它。
进一步调查显示，它仅在 chrome 检查器处于设备模式时发生。所以可能是与点击选择相关的样式。

标签： css reactjs

【解决方案1】：

对于遇到类似问题的其他人：

问题仅出现在手机和chrome inspector的设备模式上。这是由于 tap-highlight 属性。

将 -webkit-tap-highlight-color 设置为 rgba(0,0,0,0) 隐藏了问题，但它是非标准 css 属性，因此该解决方案可能不适用于所有设备/浏览器/用户。

【讨论】：