Mac에서 Chrome에서만 입력 할 때 입력 필드가 작아짐 (아마도 CSS-Grid 문제)

아무 것도 입력하지 않으면 입력 필드가 매우 작아지는 웹 사이트를 만들었습니다. 그러나이 동작은 Mac의 Chrome (현재 버전 63)에서만 나타납니다. Safari 나 Windows의 Chrome에서 동일한 웹 사이트에이 사실을 표시하지 않으며 어떤 일이 일어나는지 전혀 알지 못합니다.Mac에서 Chrome에서만 입력 할 때 입력 필드가 작아짐 (아마도 CSS-Grid 문제)

이 스크린 샷 :

나는 문제가 입력 필드와 CSS를 그리드 컬럼을 작성 내 시도에 의한 것이 아래로 지목. 당신은 내가 다음 옵션 중 하나와 함께이를 달성하려고 한 (S) CSS 코드에서 볼 수 있습니다 여기에

// All these 3 options get me to the same bug: 
justify-items: stretch; 

// Same with this option: 
input { 
    width: 100%; 
} 

// Or this one: 
input { 
    justify-self: stretch; 
}

문제의 더 많거나 적은 최소 버전을. 나는 또한 바이올린을 만들었지 만 버그는 Mac에서 크롬과 바이올린에 표시되지 않습니다/

Fiddle

는 HTML :

이

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="showcase" class="grid"> 
     <!-- OTHER STUFF I ARRANGE WITH GRID --> 
     <form action="#" class="grid"> 
     <input type="text" name="name" placeholder="Name"> 
     </form> 
    </div> 
</body> 
</html>

SCSS :

input { 
    border: 0px; 
    font-size: 15px; 
    padding: 1.4em; 
} 

.grid { 
    display: grid; 
    align-items: center; 
    justify-items: center; 
} 

#showcase { 
    grid-template-columns: auto 180px; 

    form { 
    background: rgba(34, 34, 30, 0.75); 
    grid-template-columns: repeat(3, 1fr); 
    grid-column-gap: 1ch; 
    padding: 3em; 
    justify-self: stretch; 

    // All these 3 options get me to the same bug: 
    justify-items: stretch; 

    // Same with this option: 
    input { 
     width: 100%; 
    } 

    // Or this one: 
    input { 
     justify-self: stretch; 
    } 
    } 
}

누군가 희망 아이디어가 있고 저를 도울 수 있습니다.

출처

2017-12-15 Mr.Floppy

이 효과를 일으키는 페이지에서 다른 최우선 스타일이 제안합니다 "버그가 Mac에서 크롬 바이올린에 표시되지 않습니다." 아마 적용된 것일뿐입니다 : 소리에 집중하여 개발자 도구에서 검사 해 보았습니까? 포커스를 강제로 적용한 다음 브라우저에서 적용 할 스타일을 확인할 수 있습니다. – delinear

@delinear 예 시도 : 활성 및 초점 : Windows와 Mac에서 동일한 CSS 속성을 추가합니다. 기본적으로 "outline-offset : -2px;"를 추가하십시오. 및 "outline : -webkit-focus-ring-color auto 5px;" "none"과 0으로 오버라이드하더라도 동일한 문제가 발생합니다. –

아마도 관련이 있습니다 (브라우저 변형에 대한 내 대답의 맨 아래 부분 참조). https://stackoverflow.com/q/47723114/3597276 –

사실 그리드 시스템과 결합하여 입력란을 처리하면 Chrome에 버그가있는 것 같습니다. 내가 divs에 입력 필드를 싸서 지금은 매력처럼 작동합니다. 정답을 가리키는 대한 @Michael_B에

감사 : https://stackoverflow.com/a/44934676/2224874

출처

2017-12-17 13:11:02

Mac에서 Chrome에서만 입력 할 때 입력 필드가 작아짐 (아마도 CSS-Grid 문제)

답변

관련 문제