css issue

여긴 css 에서 생각과 다르게 동작하는 사례과 해결책을 모아 둔다

Overflow: hidden with border radius not working on Safari

• will-change: transform; mozilla
  • 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다.
  • 이러한 종류의 최적화는 잠재적으로 성능 비용
• -webkit-mask-image: -webkit-radial-gradient(white, black);
  • list item 에 사용하게 되어서 will-change 대신 이 방법 사용

safari 에서 다음이 적용 되지 않는 경우가 있다

• background-repeat-x, background-repeat-y 가 젹용 되지 않는다.
  • repeat-x 나 repeat-y 사용

IE11 에서 원이 안 되는 현상이 있었다. border: 를 지정하니 작동하였다.

• 해결 전

  &:before {
      position: absolute;
      content: '';
      width: 14px;
      height: 14px;
  
      top: 2px;
      left: -7px;
  
      background-color: #000;
      border-radius: 10px;
  }
  

• 해결 후

  &:before {
      position: absolute;
      content: '';
      width: 12px;
      height: 12px;
  
      top: 2px;
      left: -7px;
  
      background-color: #000;
      border-radius: 10px;
      border: 2px solid #000000;
  }
  

IE11 max-height, max-width not working

아래 css 에 해당되는 Element 에 js object 를 적용하니 IE11 에서 max-height, max-width 가 적용되지 않았다.

initial 가 적용되지 않는 걸로 추론하여 max-height 기본 값을 찾아서 지정했다 참고 w3schools max-height

• 해결 전

   {
      max-height: 100%;
      max-width: 100%;
  }
  

  {
      maxHeight: 'initial',
      maxWidth: 'initial',
  }
  

• 해결 후

   {
      max-height: 100%;
      max-width: 100%;
  }
  

  {
      maxHeight: 'none',
      maxWidth: 'none',
  }
  

IE11 svg blur 에 overflow: hidden not working

svg 로 blur 를 처리 했다. IE11 에서 부모의 다음 스타일이 적용되지 않았다

• 해결 전

oveflow: hidden;

• 해결 후

oveflow: hidden;
position: relative;

다음의 경우 red 가 적용 될 줄 알았다 … 가상 선택자는 child 가 아닌가 보다…

background-color: red;

&:hover {
  background: inherit;
}

background-color: red;

&:hover {
  background: transparent;
}

flex 의 child 에 text-overflow 하는 방법

출처 stackoverflow

핵심은 min-width: 0px;

.container {
    display: flex;
}

.container>div:first-child{
    white-space:nowrap;
    -webkit-order:1;
    -webkit-flex: 1;
    -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0px; /* new algorithm mises the calculation of the width */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}

.test-flex {
  display: flex;
}

<div class="test-flex">
  <div class="container">
          <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
      <div>foo bar</div>
  </div>
</div>

안드로이드는 DP, IOS 는 PT 를 기본 단위로 사용