css - IE11 draws small line between positioned elements -



css - IE11 draws small line between positioned elements -

i constructed thought bubble html , css , found issue solely on ie11 - every other browser (down ie9) works great.

the thought simple: have container contains text , give background-color , round corners. set element , create arrow. position arrow sits right next container.

the problem: somehow, though arrow sits adjusted, there little line between arrow , container. , line less 1px in height. if move arrow notch sits within container cannot accepted due fact arrow , container must have transparency.

here jsfiddle showing problem: http://jsfiddle.net/hurrtz/t2rhr/3/

html simple.

<div id="bubble"> <div class="arrow"></div> </div>

css as simple , boils downwards (some pseudo code ahead):

#bubble { (some dimension giving) background-color: rgba(0,0,0,0.5); //black, semitransparent position: relative; } #bubble .arrow { position: absolute; bottom: 0 - height of arrow: background-color: rgba(0,0,0,0.5); //black, semitransparent }

by way: problem increases, decreases or seizes exist more allow ie11 zoom in or if browser window's height changed.

here's looks gap in ie11:

a screenshot of picture, zoomed @ 500% shows this:

it's because way border calculated. screen finite grid, when decide center of arc @ coordinates e.g. "10 x, 10 y" mean different things:

the center of arc in middle of 10th pixel? the center of arc @ begginnig of 10th pixel? the center of arc @ end of 10th pixel?

so, when draws arc radius 10px go half pixel farther (or closer) point expected (and yield "half pixel" sizes, 2px grayness line wanted 1px black, circle not round or other sad surprise).

this kind of different behaviour mutual among major browsers (e.g. see this: border-radius: 50% not producing perfect circles in chrome ) think shouldn't considered bug, implementation decisions unluckily differ browser another.

the mutual solutions play border width (0.5px,1px,2px) , radius (even/odd sizes) or positioning decimals (bottom: -19.5px?). can't wich combination yield best results case since can't reproduce in windows 7 + ie11.

css internet-explorer-11

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more