dialogBoxを上下左右中央寄せにする際、
transform: translate(-50%,-50%);を使用すると文字がぼやけてしまいます。
調べたところ、backface-visibilityなどを足したりしましたが、
ぼやけたままです。
デザインの都合上、どうしても上下左右中央寄せにしたい為、
解決方法又は別の方法がございましたらご教授お願いいたします。
よろしくお願いいたします。
html
1 <div @click="toggleLineup('#')" class="overlay"></div> 2 <div class="dialogBox"> 3 <div class="iscroll"> 4 <div class="lineup-content" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"> 5 <div @click="toggleLineup('#')" class="sort-status--active"><span class="sort-icon open"></span></div> 6 <p class="lineupList-ttl">ああああああああ</p> 7 <ul> 8 <li><a href="">いいいいいいいい</a></li> 9 <li><a href="">うううううううう</a></li> 10 <li><a href="">ええええええええ</a></li> 11 <li><a href="">おおおおおおおお</a></li> 12 13 </ul> 14 </div> 15 </div> 16 </div>
css
1 2.dialog .dialogBox { 3position: absolute; 4width: 90%; 5top: 50%; 6left: 50%; 7transform: translate(-50%,-50%); 8display: table-cell; 9background: #fff; 10padding: 20px; 11border: 1px solid #666; 12backface-visibility: hidden; 13-webkit-backface-visibility: hidden; 14-webkit-font-smoothing: antialiased; 15} 16 17.dialog .overlay { 18position: absolute; 19top: -10px; 20left: -10px; 21bottom: -10px; 22right: -10px; 23background: #fff; 24opacity: 0.77; 25} 26 27.dialog .dialogBox { 28width: 90%; 29position: absolute; 30height: auto; 31top: 0; 32left: 0; 33right: 0; 34margin: auto; 35} 36 37.dialog .iscroll { 38height: 100%; 39overflow: hidden; 40display: inline-block; 41} 42 43.sort-status--active { 44display: block; 45width: 20px; 46height: 20px; 47position: absolute; 48top: 0; 49background-color: #d72b45; 50} 51 52.open { 53transform: translate3d(0, 0, 0) rotate(45deg); 54cursor: pointer; 55} 56 57.sort-icon { 58display: block; 59background-image: url(./images/lineup-plus.png); 60background-position: center; 61width: 20px; 62height: 20px; 63transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); 64backface-visibility: hidden; 65transform: translate3d(0, 0, 0) rotate(0deg); 66} 67 68.lineupList-ttl { 69padding: 0 0 0 34px; 70font-weight: 600; 71} 72 73.lineup-content ul { 74display: table-cell; 75position: relative; 76width: 33.333%; 77} 78 79.lineup-content li {padding: 0 20px 20px 34px;} 80 81.dialog li:after { 82content: ""; 83display: inline-block; 84position: absolute; 85right: 0; 86width: 12px; 87height: 14px; 88background-image: url(./images/arr.svg); 89} 90
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。