2017-06-28 4 views
0

Ich habe ein Problem, in Rand dieses Hover-Effekt sieht wirklich schlecht :(

Microsoft Edge:
Link Hover GIF (imgur)Hover-Effekt Sieht Buggy (Microsoft Edge)


Google Chrome:
Link Hover GIF (imgur)

In Google Chrome l OK, aber sobald ich Microsoft Edge ausprobiere, sieht es sehr beschissen aus. Gibt es eine Möglichkeit, es zu beheben?

Code:
HTML

<div class="event--event__mod"> 
<a class="event--event__mod__item" href="censored"> 
<div class="event--mod__title">Problem Title</div> 
<div class="event--mod__date">Date</div>    
<div class="event--mod__price">105,00&€</div></a></div 

CSS

.mod-ohanah--events { 
    margin-left: -30px; 
} 
.mod-ohanah--events:after { 
    content: ''; 
    width: 100%; 
    height: 0; 
    clear: both; 
    display: block; 
} 
.mod-ohanah--events .event--event__mod { 
    float: left; 
    padding-left: 30px; 
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 35px; 
} 
@media screen and (min-width:640px){ 
    .mod-ohanah--events .event--event__mod { 
    width: 50%; 
    } 
} 
@media screen and (min-width:1000px){ 
    .mod-ohanah--events .event--event__mod { 
    width: 33.333333333%; 
    } 
} 
.uk-panel-space .mod-ohanah--events .event--event__mod { 
    width: 100%; 
} 

.mod-ohanah--events .event--event__mod__item { 
    background: #FFF; 
    display: block; 
    color: #000; 
    padding: 40px 35px 30px; 
    height: 260px; 
    box-sizing: border-box; 
    position: relative; 
} 
.uk-panel-space .mod-ohanah--events .event--event__mod__item { 
    height: 260px; 
} 
.mod-ohanah--events .event--event__mod__item:focus { 
    outline: none; 
    text-decoration: none; 
} 
.mod-ohanah--events .event--event__mod__item:hover { 
    background: #f14a70; 
    color: #FFF; 
    text-decoration: none; 
} 

.mod-ohanah--events .event--event__mod__item .event--mod__title { 
    font-size: 20px; 
    color: #000; 
    font-weight: 200; 
    margin-bottom: 40px; 
    transition: all 0.667s cubic-bezier(0.16, 1, 0.29, 0.99); 
} 
@media screen and (min-width: 768px){ 
    .mod-ohanah--events .event--event__mod__item .event--mod__title { 
    font-size: 16px; 
    } 
} 
@media screen and (min-width:1000px){ 
    .mod-ohanah--events .event--event__mod__item .event--mod__title { 
    font-size: 20px; 
    } 
} 
@media screen and (min-width:1220px){ 
    .mod-ohanah--events .event--event__mod__item .event--mod__title { 
    font-size: 24px; 
    } 
} 

.uk-panel-space .mod-ohanah--events .event--event__mod__item .event--mod__title { 
    margin-bottom: 15px; 
} 
.mod-ohanah--events .event--event__mod__item:hover .event--mod__title { 
    color: #FFF; 
} 

.mod-ohanah--events .event--event__mod__item .event--mod__date { 
    margin-bottom: 40px; 
    font-size: 14px; 
} 

.mod-ohanah--events .event--mod__price { 
    line-height: 38px; 
    padding: 0 18px; 
    background: #f4f4f4; 
    box-sizing: border-box; 
    border: 1px solid transparent; 
    font-size: 14px; 
    font-weight: bold; 
    color: #797979; 
    position: absolute; 
    bottom: 30px; 
    left: 35px; 
    transition: all 0.667s cubic-bezier(0.16, 1, 0.29, 0.99) !important; 
} 
.mod-ohanah--events .event--event__mod__item:hover .event--mod__price { 
    background: transparent; 
    border: 1px solid #FFF; 
    color: #FFF; 
} 
+1

diese ähnliche Frage gefunden: https://stackoverflow.com/questions/42242690/ms-edge-css-transition-flickering und es ist Antwort: https://stackoverflow.com/a/42570861/3909588 –

+0

@MaxSeelig Bereits sah das, aber ist nicht das Problem der Post Sie gesendet, dass 'Transition-Eigenschaft: alle' verursacht den Bug? Ich benutze es nicht ... – YoKoGFX

Antwort

0

Dieses Problem mit dem neuen Fall festgelegt wurde Creators-Update überführt werden muss.

0

Vielleicht sollten Sie versuchen Sie,

transition: background 0.667s cubic-bezier(0.16, 1, 0.29, 0.99), color 0.667s cubic-bezier(0.16, 1, 0.29, 0.99); 

Siehe jede Eigenschaft, die

Anstelle von

transition: all 0.667s cubic-bezier(0.16, 1, 0.29, 0.99); 
+0

Gute Idee, aber nicht das Problem zu beheben :( – YoKoGFX

+0

Könntest du mir ein JFiddle? –

+0

Kann nicht die JSfiddle zu arbeiten ... Kann ich Ihnen die URL über Twitter gesendet? Weil ich nicht wollen Website wird von Google auf Stackoverflow indiziert: D – YoKoGFX

Verwandte Themen