html - Why is there a 1px roundoff error when centering images and how to work around it? -
it's best see yourself, check out fiddle:
https://jsfiddle.net/6rc4zzcv/1/
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>test</title> <style type="text/css"> #container { background-image: url('data:image/png;base64,ivborw0kggoaaaansuheugaab9aaaadicamaaachxiozaaaablbmveuaaad///+l2z/daaacq0leqvr42u3vqq0amazeshx8oxcowuk0g0i+uquaxlshaihn6abg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chawcgdgayogbg6abg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chawcgdgayogbg6abg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaichawcgdgcgdgayogbg6pctxqaygdowrczpdiyoabg6agdoagdoaichawcgdgayogayogbg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chawcgdgayogbg6abg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chawcgdgayogbg6abg6acaoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chawcgdgayogbg6acaoqoaoqmahg4agdoayogayogagkedaiyoabg6abg6agdoaichawcgdgcgdgayogbg6acaoqoaoqmahg4agdoayogayogagkedaiyoabg6abg6agdoaichawcgdgcgdgayogbg6acaoqoaoqmahg4agdoayogayogagkedaiyoabg6agdokkfhaqygdkyrbsqdoqmahg4agdoagdoayogagkedaiyoaiyoabg6agdoaicha4chswaahg4agdoayogagkedgkedaiyoabg6agdoagdoaichawcgdgayogayogbg6acaoqmahg4ahg4agdoayogagkedgkedaiyoabg6agdoagdoaichawcgdgayogayogbg6acaoqmahg4ahg4agdoayogagkedgkedaleeydfpyfw5pleaaaaasuvork5cyii='); background-position: center top; background-repeat: no-repeat; min-width: 302px; background-color: yellow; border: 1px solid blue; } #centerbox { width: 300px; height: 300px; border: 1px solid lime; margin: auto; position: relative } #floater { position: absolute; top: 50px; left: 101px; width: 98px; height: 98px; background-color: red; } </style> </head> <body> <div id="container"> <div id="centerbox"> <div id="floater"></div> </div> </div> </body> </html> when resize browser window (or fiddle output window), red square stays within black frame, , there's 1px gap. checked in chrome , ie11. ie11 seems try , render "half-pixel", it's less noticeable, still there. curiously, if background image smaller viewport, not happen.
i can imagine cause effect (the centering code duplicated in 2 places, background , margins, , uses different rounding methods) - how work around it?
in real life, black box artistically drawn box merges background, i'd rather avoid splitting out.
yes you've noticed, issue chrome (and possibly other browsers too) bugs on centering large images, cause centering calculation offset.
one solution be, instead of setting 2000×200px background parent hitting issue, use inner element set at
#bg{ /* i'm inside parent */ position: relative; background: url("2000x200image.jpg"); width: 2000px; height: 200px; left: 50%; /* center left edge */ margin-left: -1000px; /* -half width */ } as can see above, the element centered! , move same other centered elements on page.
html:
<div id="container"> <div id="centerbox"> <div id="bg"></div> <div id="floater"></div> </div> </div> css:
#container{ min-width: 302px; background-color: yellow; border: 1px solid blue; overflow:hidden; } #bg{ position:relative; width:2000px; /* same image size */ height:200px; /* center element instead of image! */ left: 50%; margin-left:-1000px; /* -half width */ background: url('data:image/png;base64,ivborw0kg...='); } #centerbox{ width: 300px; height: 300px; border: 1px solid lime; margin: auto; position: relative; } #floater{ position: absolute; top: 51px; left: 101px; width: 98px; height: 98px; background-color: red; } 
Comments
Post a Comment